mxClient

Bootstrapping mechanism for the mxGraph thin client.  The production version of this file contains all code required to run the mxGraph thin client, as well as global constants to identify the browser and operating system in use.  You may have to load chrome://global/content/contentAreaUtils.js in your page to disable certain security restrictions in Mozilla.

Summary
mxClientBootstrapping mechanism for the mxGraph thin client.
Variables
VERSIONContains the current version of the mxGraph library.
IS_IETrue if the current browser is Internet Explorer 10 or below.
IS_IE6True if the current browser is Internet Explorer 6.x.
IS_IE11True if the current browser is Internet Explorer 11.x.
IS_EDGETrue if the current browser is Microsoft Edge.
IS_QUIRKSTrue if the current browser is Internet Explorer and it is in quirks mode.
IS_EMTrue if the browser is IE11 in enterprise mode (IE8 standards mode).
VML_PREFIXPrefix for VML namespace in node names.
OFFICE_PREFIXPrefix for VML office namespace in node names.
IS_NSTrue if the current browser is Netscape (including Firefox).
IS_OPTrue if the current browser is Opera.
IS_OTTrue if -o-transform is available as a CSS style, ie for Opera browsers based on a Presto engine with version 2.5 or later.
IS_SFTrue if the current browser is Safari.
IS_IOSReturns true if the user agent is an iPad, iPhone or iPod.
IS_GCTrue if the current browser is Google Chrome.
IS_CHROMEAPPTrue if the this is running inside a Chrome App.
IS_FFTrue if the current browser is Firefox.
IS_MTTrue if -moz-transform is available as a CSS style.
IS_VMLTrue if the browser supports VML.
IS_SVGTrue if the browser supports SVG.
NO_FOTrue if foreignObject support is not available.
IS_WINTrue if the client is a Windows.
IS_MACTrue if the client is a Mac.
IS_CHROMEOSTrue if the client is a Chrome OS.
IS_TOUCHTrue if this device supports touchstart/-move/-end events (Apple iOS, Android, Chromebook and Chrome Browser on touch-enabled devices).
IS_POINTERTrue if this device supports Microsoft pointer events (always false on Macs).
IS_LOCALTrue if the documents location does not start with http:// or https://.
defaultBundlesContains the base names of the default bundles if mxLoadResources is false.
Functions
isBrowserSupportedReturns true if the current browser is supported, that is, if mxClient.IS_VML or mxClient.IS_SVG is true.
linkAdds a link node to the head of the document.
loadResourcesHelper method to load the default bundles if mxLoadResources is false.
includeDynamically adds a script node to the document header.
Variables
mxLoadResourcesOptional global config variable to toggle loading of the two resource files in mxGraph and mxEditor.
mxForceIncludesOptional global config variable to force loading the JavaScript files in development mode.
mxResourceExtensionOptional global config variable to specify the extension of resource files.
mxLoadStylesheetsOptional global config variable to toggle loading of the CSS files when the library is initialized.
basePathBasepath for all URLs in the core without trailing slash.
imageBasePathBasepath for all images URLs in the core without trailing slash.
languageDefines the language of the client, eg.
defaultLanguageDefines the default language which is used in the common resource files.
languagesDefines the optional array of all supported language extensions.
mxLogA singleton class that implements a simple console.
Variables
consoleNameSpecifies the name of the console window.
TRACESpecified if the output for enter and leave should be visible in the console.
DEBUGSpecifies if the output for debug should be visible in the console.
WARNSpecifies if the output for warn should be visible in the console.
bufferBuffer for pre-initialized content.
Functions
initInitializes the DOM node for the console.
infoWrites the current navigator information to the console.
addButtonAdds a button to the console using the given label and function.
isVisibleReturns true if the console is visible.
showShows the console.
setVisibleShows or hides the console.
enterWrites the specified string to the console if TRACE is true and returns the current time in milliseconds.
leaveWrites the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds.
debugAdds all arguments to the console if DEBUG is enabled.
warnAdds all arguments to the console if WARN is enabled.
writeAdds the specified strings to the console.
writelnAdds the specified strings to the console, appending a linefeed at the end of each string.
mxObjectIdentityIdentity for JavaScript objects and functions.
Variables
FIELD_NAMEName of the field to be used to store the object ID.
counterCurrent counter.
Functions
getReturns the ID for the given object or function or null if no object is specified.
clearDeletes the ID from the given object or function.
mxDictionaryA wrapper class for an associative array with object keys.
Functions
mxEventSourceConstructs a new dictionary which allows object to be used as keys.
mapStores the (key, value) pairs in this dictionary.
clearClears the dictionary.
getReturns the value for the given key.
putStores the value under the given key and returns the previous value for that key.
removeRemoves the value for the given key and returns the value that has been removed.
getKeysReturns all keys as an array.
getValuesReturns all values as an array.
visitVisits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.
mxResourcesImplements internationalization.
Variables
resourcesObject that maps from keys to values.
extensionSpecifies the extension used for language files.
resourcesEncodedSpecifies whether or not values in resource files are encoded with \u or percentage.
loadDefaultBundleSpecifies if the default file for a given basename should be loaded.
loadDefaultBundleSpecifies if the specific language file file for a given basename should be loaded.
Functions
isLanguageSupportedHook for subclassers to disable support for a given language.
getDefaultBundleHook for subclassers to return the URL for the special bundle.
getSpecialBundleHook for subclassers to return the URL for the special bundle.
addAdds the default and current language properties file for the specified basename.
parseParses the key, value pairs in the specified text and stores them as local resources.
getReturns the value for the specified resource key.
replacePlaceholdersReplaces the given placeholders with the given parameters.
loadResourcesLoads all required resources asynchronously.
mxPointImplements a 2-dimensional vector with double precision coordinates.
Functions
mxPointConstructs a new point for the optional x and y coordinates.
Variables
xHolds the x-coordinate of the point.
yHolds the y-coordinate of the point.
Functions
equalsReturns true if the given object equals this point.
cloneReturns a clone of this mxPoint.
mxRectangleExtends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
Functions
mxRectangleConstructs a new rectangle for the optional parameters.
Variables
widthHolds the width of the rectangle.
heightHolds the height of the rectangle.
Functions
setRectSets this rectangle to the specified values
getCenterXReturns the x-coordinate of the center point.
getCenterYReturns the y-coordinate of the center point.
addAdds the given rectangle to this rectangle.
intersectChanges this rectangle to where it overlaps with the given rectangle.
growGrows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.
getPointReturns the top, left corner as a new mxPoint.
rotate90Rotates this rectangle by 90 degree around its center point.
equalsReturns true if the given object equals this rectangle.
fromRectangleReturns a new mxRectangle which is a copy of the given rectangle.
mxEffectsProvides animation effects.
Functions
animateChangesAsynchronous animated move operation.
cascadeOpacitySets the opacity on the given cell and its descendants.
fadeOutAsynchronous fade-out operation.
mxUtilsA singleton class that provides cross-browser helper methods.
Variables
errorResourceSpecifies the resource key for the title of the error window.
closeResourceSpecifies the resource key for the label of the close button.
errorImageDefines the image used for error dialogs.
Functions
removeCursorsRemoves the cursors from the style of the given DOM node and its descendants.
getCurrentStyleReturns the current style of the specified element.
parseCssNumberParses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).
setPrefixedStyleAdds the given style with the standard name and an optional vendor prefix for the current browser.
hasScrollbarsReturns true if the overflow CSS property of the given node is either scroll or auto.
bindReturns a wrapper function that locks the execution scope of the given function to the specified scope.
evalEvaluates the given expression using eval and returns the JavaScript object that represents the expression result.
findNodeReturns the first node where attr equals value.
getFunctionNameReturns the name for the given function.
indexOfReturns the index of obj in array or -1 if the array does not contain the given object.
forEachCalls the given function for each element of the given array and returns the array.
removeRemoves all occurrences of the given object in the given array or object.
isNodeReturns true if the given value is an XML node with the node name and if the optional attribute has the specified value.
isAncestorNodeReturns true if the given ancestor is an ancestor of the given DOM node in the DOM.
getChildNodesReturns an array of child nodes that are of the given node type.
importNodeCross browser implementation for document.importNode.
createXmlDocumentReturns a new, empty XML document.
parseXmlParses the specified XML string into a new XML document and returns the new document.
clearSelectionClears the current selection in the page.
getPrettyXMLReturns a pretty printed string that represents the XML tree for the given node.
removeWhitespaceRemoves the sibling text nodes for the given node that only consists of tabs, newlines and spaces.
htmlEntitiesReplaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.
isVmlReturns true if the given node is in the VML namespace.
getXmlReturns the XML content of the specified node.
extractTextWithWhitespaceReturns the text content of the specified node.
replaceTrailingNewlinesReplaces each trailing newline with the given pattern.
getTextContentReturns the text content of the specified node.
setTextContentSets the text content of the specified node.
getInnerHtmlReturns the inner HTML for the given node as a string or an empty string if no node was specified.
getOuterHtmlReturns the outer HTML for the given node as a string or an empty string if no node was specified.
writeCreates a text node for the given string and appends it to the given parent.
writelnCreates a text node for the given string and appends it to the given parent with an additional linefeed.
brAppends a linebreak to the given parent and returns the linebreak.
buttonReturns a new button with the given level and function as an onclick event handler.
paraAppends a new paragraph with the given text to the specified parent and returns the paragraph.
addTransparentBackgroundFilterAdds a transparent background to the filter of the given node.
linkActionAdds a hyperlink to the specified parent that invokes action on the specified editor.
linkInvokeAdds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.
linkAdds a hyperlink to the specified parent and invokes the given function when the link is clicked.
getDocumentSizeReturns the client size for the current document as an mxRectangle.
fitMakes sure the given node is inside the visible area of the window.
loadLoads the specified URL synchronously and returns the mxXmlRequest.
getLoads the specified URL asynchronously and invokes the given functions depending on the request status.
getAllLoads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.
postPosts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.
submitSubmits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.
loadIntoLoads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.
getValueReturns the value for the given key in the given associative array or the given default value if the value is null.
getNumberReturns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.
getColorReturns the color value for the given key in the given associative array or the given default value if the value is null.
cloneRecursively clones the specified object ignoring all fieldnames in the given array of transient fields.
equalPointsCompares all mxPoints in the given lists.
equalEntriesReturns true if all properties of the given objects are equal.
removeDuplicatesRemoves all duplicates from the given array.
isNaNReturns true if the given value is of type number and isNaN returns true.
extendAssigns a copy of the superclass prototype to the subclass prototype.
toStringReturns a textual representation of the specified object.
toRadiansConverts the given degree to radians.
toDegreeConverts the given radians to degree.
arcToCurvesConverts the given arc to a series of curves.
getBoundingBoxReturns the bounding box for the rotated rectangle.
getRotatedPointRotates the given point by the given cos and sin.
reversePortConstraintsReverse the port constraint bitmask.
findNearestSegmentFinds the index of the nearest segment on the given cell state for the specified coordinate pair.
getDirectedBoundsAdds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.
getPerimeterPointReturns the intersection between the polygon defined by the array of points and the line between center and point.
rectangleIntersectsSegmentReturns true if the given rectangle intersects the given segment.
containsReturns true if the specified point (x, y) is contained in the given rectangle.
intersectsReturns true if the two rectangles intersect.
intersectsReturns true if the two rectangles intersect.
getOffsetReturns the offset for the specified container as an mxPoint.
getDocumentScrollOriginReturns the scroll origin of the given document or the current document if no document is given.
getScrollOriginReturns the top, left corner of the viewrect as an mxPoint.
convertPointConverts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
ltrimStrips all whitespaces from the beginning of the string.
rtrimStrips all whitespaces from the end of the string.
trimStrips all whitespaces from both end of the string.
isNumericReturns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.
isIntegerReturns true if the given value is an valid integer number.
modReturns the remainder of division of n by m.
intersectionReturns the intersection of two lines as an mxPoint.
ptSegDistSqReturns the square distance between a segment and a point.
ptLineDistReturns the distance between a line defined by two points and a point.
relativeCcwReturns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.
animateChangesSee mxEffects.animateChanges.
cascadeOpacitySee mxEffects.cascadeOpacity.
fadeOutSee mxEffects.fadeOut.
setOpacitySets the opacity of the specified DOM node to the given value in %.
createImageCreates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.
sortCellsSorts the given cells according to the order in the cell hierarchy.
getStylenameReturns the stylename in a style of the form [(stylename|key=value);] or an empty string if the given style does not contain a stylename.
getStylenamesReturns the stylenames in a style of the form [(stylename|key=value);] or an empty array if the given style does not contain any stylenames.
indexOfStylenameReturns the index of the given stylename in the given style.
addStylenameAdds the specified stylename to the given style if it does not already contain the stylename.
removeStylenameRemoves all occurrences of the specified stylename in the given style and returns the updated style.
removeAllStylenamesRemoves all stylenames from the given style and returns the updated style.
setCellStylesAssigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.
setStyleAdds or removes the given key, value pair to the style and returns the new style.
setCellStyleFlagsSets or toggles the flag bit for the given key in the cell’s styles.
setStyleFlagSets or removes the given key from the specified style and returns the new style.
getAlignmentAsPointReturns an mxPoint that represents the horizontal and vertical alignment for numeric computations.
getSizeForStringReturns an mxRectangle with the size (width and height in pixels) of the given string.
getViewXml
getScaleForPageCountReturns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
showCopies the styles and the markup from the graph’s container into the given document and removes all cursor styles.
printScreenPrints the specified graph using a new window and the built-in print dialog.
popupShows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
alertDisplayss the given alert in a new dialog.
promptDisplays the given message in a prompt dialog.
confirmDisplays the given message in a confirm dialog.
errorDisplays the given error message in a new mxWindow of the given width.
makeDraggableConfigures the given DOM element to act as a drag source for the specified graph.
mxConstantsDefines various global constants.
Variables
DEFAULT_HOTSPOTDefines the portion of the cell which is to be used as a connectable region.
MIN_HOTSPOT_SIZEDefines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
MAX_HOTSPOT_SIZEDefines the maximum size in pixels of the portion of the cell which is to be used as a connectable region.
RENDERING_HINT_EXACTDefines the exact rendering hint.
RENDERING_HINT_FASTERDefines the faster rendering hint.
RENDERING_HINT_FASTESTDefines the fastest rendering hint.
DIALECT_SVGDefines the SVG display dialect name.
DIALECT_VMLDefines the VML display dialect name.
DIALECT_MIXEDHTMLDefines the mixed HTML display dialect name.
DIALECT_PREFERHTMLDefines the preferred HTML display dialect name.
DIALECT_STRICTHTMLDefines the strict HTML display dialect.
NS_SVGDefines the SVG namespace.
NS_XHTMLDefines the XHTML namespace.
NS_XLINKDefines the XLink namespace.
SHADOWCOLORDefines the color to be used to draw shadows in shapes and windows.
VML_SHADOWCOLORUsed for shadow color in filters where transparency is not supported (Microsoft Internet Explorer).
SHADOW_OFFSET_XSpecifies the x-offset of the shadow.
SHADOW_OFFSET_YSpecifies the y-offset of the shadow.
SHADOW_OPACITYDefines the opacity for shadows.
NODETYPE_ELEMENTDOM node of type ELEMENT.
NODETYPE_ATTRIBUTEDOM node of type ATTRIBUTE.
NODETYPE_TEXTDOM node of type TEXT.
NODETYPE_CDATADOM node of type CDATA.
NODETYPE_ENTITY_REFERENCEDOM node of type ENTITY_REFERENCE.
NODETYPE_ENTITYDOM node of type ENTITY.
NODETYPE_PROCESSING_INSTRUCTIONDOM node of type PROCESSING_INSTRUCTION.
NODETYPE_COMMENTDOM node of type COMMENT.
NODETYPE_DOCUMENTDOM node of type DOCUMENT.
NODETYPE_DOCUMENTTYPEDOM node of type DOCUMENTTYPE.
NODETYPE_DOCUMENT_FRAGMENTDOM node of type DOCUMENT_FRAGMENT.
NODETYPE_NOTATIONDOM node of type NOTATION.
TOOLTIP_VERTICAL_OFFSETDefines the vertical offset for the tooltip.
DEFAULT_VALID_COLORSpecifies the default valid color.
DEFAULT_INVALID_COLORSpecifies the default invalid color.
OUTLINE_HIGHLIGHT_COLORSpecifies the default highlight color for shape outlines.
OUTLINE_HIGHLIGHT_COLORDefines the strokewidth to be used for shape outlines.
HIGHLIGHT_STROKEWIDTHDefines the strokewidth to be used for the highlights.
CONSTRAINT_HIGHLIGHT_SIZESize of the constraint highlight (in px).
HIGHLIGHT_OPACITYOpacity (in %) used for the highlights (including outline).
CURSOR_MOVABLE_VERTEXDefines the cursor for a movable vertex.
CURSOR_MOVABLE_EDGEDefines the cursor for a movable edge.
CURSOR_LABEL_HANDLEDefines the cursor for a movable label.
CURSOR_TERMINAL_HANDLEDefines the cursor for a terminal handle.
CURSOR_BEND_HANDLEDefines the cursor for a movable bend.
CURSOR_VIRTUAL_BEND_HANDLEDefines the cursor for a movable bend.
CURSOR_CONNECTDefines the cursor for a connectable state.
HIGHLIGHT_COLORDefines the color to be used for the cell highlighting.
TARGET_HIGHLIGHT_COLORDefines the color to be used for highlighting a target cell for a new or changed connection.
INVALID_CONNECT_TARGET_COLORDefines the color to be used for highlighting a invalid target cells for a new or changed connections.
DROP_TARGET_COLORDefines the color to be used for the highlighting target parent cells (for drag and drop).
VALID_COLORDefines the color to be used for the coloring valid connection previews.
INVALID_COLORDefines the color to be used for the coloring invalid connection previews.
EDGE_SELECTION_COLORDefines the color to be used for the selection border of edges.
VERTEX_SELECTION_COLORDefines the color to be used for the selection border of vertices.
VERTEX_SELECTION_STROKEWIDTHDefines the strokewidth to be used for vertex selections.
EDGE_SELECTION_STROKEWIDTHDefines the strokewidth to be used for edge selections.
SELECTION_DASHEDDefines the dashed state to be used for the vertex selection border.
SELECTION_DASHEDDefines the dashed state to be used for the edge selection border.
GUIDE_COLORDefines the color to be used for the guidelines in mxGraphHandler.
GUIDE_STROKEWIDTHDefines the strokewidth to be used for the guidelines in mxGraphHandler.
OUTLINE_COLORDefines the color to be used for the outline rectangle border.
OUTLINE_STROKEWIDTHDefines the strokewidth to be used for the outline rectangle stroke width.
HANDLE_SIZEDefines the default size for handles.
LABEL_HANDLE_SIZEDefines the default size for label handles.
HANDLE_FILLCOLORDefines the color to be used for the handle fill color.
HANDLE_STROKECOLORDefines the color to be used for the handle stroke color.
LABEL_HANDLE_FILLCOLORDefines the color to be used for the label handle fill color.
CONNECT_HANDLE_FILLCOLORDefines the color to be used for the connect handle fill color.
LOCKED_HANDLE_FILLCOLORDefines the color to be used for the locked handle fill color.
OUTLINE_HANDLE_FILLCOLORDefines the color to be used for the outline sizer fill color.
OUTLINE_HANDLE_STROKECOLORDefines the color to be used for the outline sizer stroke color.
DEFAULT_FONTFAMILYDefines the default family for all fonts.
DEFAULT_FONTSIZEDefines the default size (in px).
DEFAULT_TEXT_DIRECTIONDefines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style.
LINE_HEIGHTDefines the default line height for text labels.
WORD_WRAPDefines the CSS value for the word-wrap property.
ABSOLUTE_LINE_HEIGHTSpecifies if absolute line heights should be used (px) in CSS.
DEFAULT_FONTSTYLEDefines the default style for all fonts.
DEFAULT_STARTSIZEDefines the default start size for swimlanes.
DEFAULT_MARKERSIZEDefines the default size for all markers.
DEFAULT_IMAGESIZEDefines the default width and height for images used in the label shape.
ENTITY_SEGMENTDefines the length of the horizontal segment of an Entity Relation.
RECTANGLE_ROUNDING_FACTORDefines the rounding factor for rounded rectangles in percent between 0 and 1.
LINE_ARCSIZEDefines the size of the arcs for rounded edges.
ARROW_SPACINGDefines the spacing between the arrow shape and its terminals.
ARROW_WIDTHDefines the width of the arrow shape.
ARROW_SIZEDefines the size of the arrowhead in the arrow shape.
PAGE_FORMAT_A4_PORTRAITDefines the rectangle for the A4 portrait page format.
PAGE_FORMAT_A4_PORTRAITDefines the rectangle for the A4 portrait page format.
PAGE_FORMAT_LETTER_PORTRAITDefines the rectangle for the Letter portrait page format.
PAGE_FORMAT_LETTER_PORTRAITDefines the rectangle for the Letter portrait page format.
NONEDefines the value for none.
STYLE_PERIMETERDefines the key for the perimeter style.
STYLE_SOURCE_PORTDefines the ID of the cell that should be used for computing the perimeter point of the source for an edge.
STYLE_TARGET_PORTDefines the ID of the cell that should be used for computing the perimeter point of the target for an edge.
STYLE_PORT_CONSTRAINTDefines the direction(s) that edges are allowed to connect to cells in.
STYLE_PORT_CONSTRAINT_ROTATIONDefine whether port constraint directions are rotated with vertex rotation.
STYLE_SOURCE_PORT_CONSTRAINTDefines the direction(s) that edges are allowed to connect to sources in.
STYLE_TARGET_PORT_CONSTRAINTDefines the direction(s) that edges are allowed to connect to targets in.
STYLE_OPACITYDefines the key for the opacity style.
STYLE_FILL_OPACITYDefines the key for the fill opacity style.
STYLE_STROKE_OPACITYDefines the key for the stroke opacity style.
STYLE_TEXT_OPACITYDefines the key for the text opacity style.
STYLE_TEXT_DIRECTIONDefines the key for the text direction style.
STYLE_OVERFLOWDefines the key for the overflow style.
STYLE_ORTHOGONALDefines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location.
STYLE_EXIT_XDefines the key for the horizontal relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_YDefines the key for the vertical relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_DXDefines the key for the horizontal offset of the connection point of an edge with its source terminal.
STYLE_EXIT_DYDefines the key for the vertical offset of the connection point of an edge with its source terminal.
STYLE_EXIT_PERIMETERDefines if the perimeter should be used to find the exact entry point along the perimeter of the source.
STYLE_ENTRY_XDefines the key for the horizontal relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_YDefines the key for the vertical relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_DXDefines the key for the horizontal offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_DYDefines the key for the vertical offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_PERIMETERDefines if the perimeter should be used to find the exact entry point along the perimeter of the target.
STYLE_WHITE_SPACEDefines the key for the white-space style.
STYLE_ROTATIONDefines the key for the rotation style.
STYLE_FILLCOLORDefines the key for the fill color.
STYLE_POINTER_EVENTSSpecifies if pointer events should be fired on transparent backgrounds.
STYLE_SWIMLANE_FILLCOLORDefines the key for the fill color of the swimlane background.
STYLE_MARGINDefines the key for the margin between the ellipses in the double ellipse shape.
STYLE_GRADIENTCOLORDefines the key for the gradient color.
STYLE_GRADIENT_DIRECTIONDefines the key for the gradient direction.
STYLE_STROKECOLORDefines the key for the strokeColor style.
STYLE_SEPARATORCOLORDefines the key for the separatorColor style.
STYLE_STROKEWIDTHDefines the key for the strokeWidth style.
STYLE_ALIGNDefines the key for the align style.
STYLE_VERTICAL_ALIGNDefines the key for the verticalAlign style.
STYLE_LABEL_WIDTHDefines the key for the width of the label if the label position is not center.
STYLE_LABEL_POSITIONDefines the key for the horizontal label position of vertices.
STYLE_VERTICAL_LABEL_POSITIONDefines the key for the vertical label position of vertices.
STYLE_IMAGE_ASPECTDefines the key for the image aspect style.
STYLE_IMAGE_ALIGNDefines the key for the align style.
STYLE_IMAGE_VERTICAL_ALIGNDefines the key for the verticalAlign style.
STYLE_GLASSDefines the key for the glass style.
STYLE_IMAGEDefines the key for the image style.
STYLE_IMAGE_WIDTHDefines the key for the imageWidth style.
STYLE_IMAGE_HEIGHTDefines the key for the imageHeight style.
STYLE_IMAGE_BACKGROUNDDefines the key for the image background color.
STYLE_IMAGE_BORDERDefines the key for the image border color.
STYLE_FLIPHDefines the key for the horizontal image flip.
STYLE_FLIPVDefines the key for the vertical flip.
STYLE_NOLABELDefines the key for the noLabel style.
STYLE_NOEDGESTYLEDefines the key for the noEdgeStyle style.
STYLE_LABEL_BACKGROUNDCOLORDefines the key for the label background color.
STYLE_LABEL_BORDERCOLORDefines the key for the label border color.
STYLE_LABEL_PADDINGDefines the key for the label padding, ie.
STYLE_INDICATOR_SHAPEDefines the key for the indicator shape used within an mxLabel.
STYLE_INDICATOR_IMAGEDefines the key for the indicator image used within an mxLabel.
STYLE_INDICATOR_COLORDefines the key for the indicatorColor style.
STYLE_INDICATOR_STROKECOLORDefines the key for the indicator stroke color in mxLabel.
STYLE_INDICATOR_GRADIENTCOLORDefines the key for the indicatorGradientColor style.
STYLE_INDICATOR_SPACINGThe defines the key for the spacing between the label and the indicator in mxLabel.
STYLE_INDICATOR_WIDTHDefines the key for the indicator width.
STYLE_INDICATOR_HEIGHTDefines the key for the indicator height.
STYLE_INDICATOR_DIRECTIONDefines the key for the indicatorDirection style.
STYLE_SHADOWDefines the key for the shadow style.
STYLE_SEGMENTDefines the key for the segment style.
STYLE_ENDARROWDefines the key for the end arrow marker.
STYLE_STARTARROWDefines the key for the start arrow marker.
STYLE_ENDSIZEDefines the key for the endSize style.
STYLE_STARTSIZEDefines the key for the startSize style.
STYLE_SWIMLANE_LINEDefines the key for the swimlaneLine style.
STYLE_ENDFILLDefines the key for the endFill style.
STYLE_STARTFILLDefines the key for the startFill style.
STYLE_DASHEDDefines the key for the dashed style.
STYLE_FIX_DASHDefines the key for the fixDash style.
STYLE_ROUNDEDDefines the key for the rounded style.
STYLE_CURVEDDefines the key for the curved style.
STYLE_ARCSIZEDefines the rounding factor for a rounded rectangle in percent (without the percent sign).
STYLE_ABSOLUTE_ARCSIZEDefines the key for the absolute arc size style.
STYLE_SOURCE_PERIMETER_SPACINGDefines the key for the source perimeter spacing.
STYLE_TARGET_PERIMETER_SPACINGDefines the key for the target perimeter spacing.
STYLE_PERIMETER_SPACINGDefines the key for the perimeter spacing.
STYLE_SPACINGDefines the key for the spacing.
STYLE_SPACING_TOPDefines the key for the spacingTop style.
STYLE_SPACING_LEFTDefines the key for the spacingLeft style.
STYLE_SPACING_BOTTOMDefines the key for the spacingBottom style The value represents the spacing, in pixels, added to the bottom side of a label in a vertex (style applies to vertices only).
STYLE_SPACING_RIGHTDefines the key for the spacingRight style The value represents the spacing, in pixels, added to the right side of a label in a vertex (style applies to vertices only).
STYLE_HORIZONTALDefines the key for the horizontal style.
STYLE_DIRECTIONDefines the key for the direction style.
STYLE_ANCHOR_POINT_DIRECTIONDefines the key for the anchorPointDirection style.
STYLE_ELBOWDefines the key for the elbow style.
STYLE_FONTCOLORDefines the key for the fontColor style.
STYLE_FONTFAMILYDefines the key for the fontFamily style.
STYLE_FONTSIZEDefines the key for the fontSize style (in px).
STYLE_FONTSTYLEDefines the key for the fontStyle style.
STYLE_ASPECTDefines the key for the aspect style.
STYLE_AUTOSIZEDefines the key for the autosize style.
STYLE_FOLDABLEDefines the key for the foldable style.
STYLE_EDITABLEDefines the key for the editable style.
STYLE_BACKGROUND_OUTLINEDefines the key for the backgroundOutline style.
STYLE_BENDABLEDefines the key for the bendable style.
STYLE_MOVABLEDefines the key for the movable style.
STYLE_RESIZABLEDefines the key for the resizable style.
STYLE_RESIZE_WIDTHDefines the key for the resizeWidth style.
STYLE_RESIZE_WIDTHDefines the key for the resizeHeight style.
STYLE_ROTATABLEDefines the key for the rotatable style.
STYLE_CLONEABLEDefines the key for the cloneable style.
STYLE_DELETABLEDefines the key for the deletable style.
STYLE_SHAPEDefines the key for the shape.
STYLE_EDGEDefines the key for the edge style.
STYLE_JETTY_SIZEDefines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_SOURCE_JETTY_SIZEDefines the key for the jetty size in mxEdgeStyle.OrthConnector.
targetJettySizeDefines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_LOOPDefines the key for the loop style.
STYLE_ORTHOGONAL_LOOPDefines the key for the orthogonal loop style.
STYLE_ROUTING_CENTER_XDefines the key for the horizontal routing center.
STYLE_ROUTING_CENTER_YDefines the key for the vertical routing center.
FONT_BOLDConstant for bold fonts.
FONT_ITALICConstant for italic fonts.
FONT_UNDERLINEConstant for underlined fonts.
SHAPE_RECTANGLEName under which mxRectangleShape is registered in mxCellRenderer.
SHAPE_ELLIPSEName under which mxEllipse is registered in mxCellRenderer.
SHAPE_DOUBLE_ELLIPSEName under which mxDoubleEllipse is registered in mxCellRenderer.
SHAPE_RHOMBUSName under which mxRhombus is registered in mxCellRenderer.
SHAPE_LINEName under which mxLine is registered in mxCellRenderer.
SHAPE_IMAGEName under which mxImageShape is registered in mxCellRenderer.
SHAPE_ARROWName under which mxArrow is registered in mxCellRenderer.
SHAPE_ARROW_CONNECTORName under which mxArrowConnector is registered in mxCellRenderer.
SHAPE_LABELName under which mxLabel is registered in mxCellRenderer.
SHAPE_CYLINDERName under which mxCylinder is registered in mxCellRenderer.
SHAPE_SWIMLANEName under which mxSwimlane is registered in mxCellRenderer.
SHAPE_CONNECTORName under which mxConnector is registered in mxCellRenderer.
SHAPE_ACTORName under which mxActor is registered in mxCellRenderer.
SHAPE_CLOUDName under which mxCloud is registered in mxCellRenderer.
SHAPE_TRIANGLEName under which mxTriangle is registered in mxCellRenderer.
SHAPE_HEXAGONName under which mxHexagon is registered in mxCellRenderer.
ARROW_CLASSICConstant for classic arrow markers.
ARROW_CLASSIC_THINConstant for thin classic arrow markers.
ARROW_BLOCKConstant for block arrow markers.
ARROW_BLOCK_THINConstant for thin block arrow markers.
ARROW_OPENConstant for open arrow markers.
ARROW_OPEN_THINConstant for thin open arrow markers.
ARROW_OVALConstant for oval arrow markers.
ARROW_DIAMONDConstant for diamond arrow markers.
ARROW_DIAMOND_THINConstant for thin diamond arrow markers.
ALIGN_LEFTConstant for left horizontal alignment.
ALIGN_CENTERConstant for center horizontal alignment.
ALIGN_RIGHTConstant for right horizontal alignment.
ALIGN_TOPConstant for top vertical alignment.
ALIGN_MIDDLEConstant for middle vertical alignment.
ALIGN_BOTTOMConstant for bottom vertical alignment.
DIRECTION_NORTHConstant for direction north.
DIRECTION_SOUTHConstant for direction south.
DIRECTION_EASTConstant for direction east.
DIRECTION_WESTConstant for direction west.
TEXT_DIRECTION_DEFAULTConstant for text direction default.
TEXT_DIRECTION_AUTOConstant for text direction automatic.
TEXT_DIRECTION_LTRConstant for text direction left to right.
TEXT_DIRECTION_RTLConstant for text direction right to left.
DIRECTION_MASK_NONEConstant for no direction.
DIRECTION_MASK_WESTBitwise mask for west direction.
DIRECTION_MASK_NORTHBitwise mask for north direction.
DIRECTION_MASK_SOUTHBitwise mask for south direction.
DIRECTION_MASK_EASTBitwise mask for east direction.
DIRECTION_MASK_ALLBitwise mask for all directions.
ELBOW_VERTICALConstant for elbow vertical.
ELBOW_HORIZONTALConstant for elbow horizontal.
EDGESTYLE_ELBOWName of the elbow edge style.
EDGESTYLE_ENTITY_RELATIONName of the entity relation edge style.
EDGESTYLE_LOOPName of the loop edge style.
EDGESTYLE_SIDETOSIDEName of the side to side edge style.
EDGESTYLE_TOPTOBOTTOMName of the top to bottom edge style.
EDGESTYLE_ORTHOGONALName of the generic orthogonal edge style.
EDGESTYLE_SEGMENTName of the generic segment edge style.
PERIMETER_ELLIPSEName of the ellipse perimeter.
PERIMETER_RECTANGLEName of the rectangle perimeter.
PERIMETER_RHOMBUSName of the rhombus perimeter.
PERIMETER_HEXAGONName of the hexagon perimeter.
PERIMETER_TRIANGLEName of the triangle perimeter.
mxEventObjectThe mxEventObject is a wrapper for all properties of a single event.
Functions
mxEventObjectConstructs a new event object with the specified name.
Variables
nameHolds the name.
propertiesHolds the properties as an associative array.
consumedHolds the consumed state.
Functions
getNameReturns name.
getPropertiesReturns properties.
getPropertyReturns the property for the given key.
isConsumedReturns true if the event has been consumed.
consumeConsumes the event.
mxMouseEventBase class for all mouse events in mxGraph.
Functions
mxMouseEventConstructs a new event object for the given arguments.
Variables
consumedHolds the consumed state of this event.
evtHolds the inner event object.
graphXHolds the x-coordinate of the event in the graph.
graphYHolds the y-coordinate of the event in the graph.
stateHolds the optional mxCellState associated with this event.
sourceStateHolds the mxCellState that was passed to the constructor.
Functions
getEventReturns evt.
getSourceReturns the target DOM element using mxEvent.getSource for evt.
isSourceReturns true if the given mxShape is the source of evt.
getXReturns <evt.clientX>.
getYReturns <evt.clientY>.
getGraphXReturns graphX.
getGraphYReturns graphY.
getStateReturns state.
getCellReturns the mxCell in state is not null.
isPopupTriggerReturns true if the event is a popup trigger.
isConsumedReturns consumed.
consumeSets consumed to true and invokes preventDefault on the native event if such a method is defined.
mxEventSourceBase class for objects that dispatch named events.
Functions
mxEventSourceConstructs a new event source.
Variables
eventListenersHolds the event names and associated listeners in an array.
eventsEnabledSpecifies if events can be fired.
eventSourceOptional source for events.
Functions
isEventsEnabledReturns eventsEnabled.
setEventsEnabledSets eventsEnabled.
getEventSourceReturns eventSource.
setEventSourceSets eventSource.
addListenerBinds the specified function to the given event name.
removeListenerRemoves all occurrences of the given listener from eventListeners.
fireEventDispatches the given event to the listeners which are registered for the event.
mxEventCross-browser DOM event support.
Functions
addListenerBinds the function to the specified event on the given element.
removeListenerRemoves the specified listener from the given element.
removeAllListenersRemoves all listeners from the given element.
addGestureListenersAdds the given listeners for touch, mouse and/or pointer events.
removeGestureListenersRemoves the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.
redirectMouseEventsRedirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments.
releaseRemoves the known listeners from the given DOM node and its descendants.
disableContextMenuDisables the context menu for the given element.
getSourceReturns the event’s target or srcElement depending on the browser.
isConsumedReturns true if the event has been consumed using consume.
isTouchEventReturns true if the event was generated using a touch device (not a pen or mouse).
isPenEventReturns true if the event was generated using a pen (not a touch device or mouse).
isMultiTouchEventReturns true if the event was generated using a touch device (not a pen or mouse).
isMouseEventReturns true if the event was generated using a mouse (not a pen or touch device).
isLeftMouseButtonReturns true if the left mouse button is pressed for the given event.
isMiddleMouseButtonReturns true if the middle mouse button is pressed for the given event.
isRightMouseButtonReturns true if the right mouse button was pressed.
isPopupTriggerReturns true if the event is a popup trigger.
isShiftDownReturns true if the shift key is pressed for the given event.
isAltDownReturns true if the alt key is pressed for the given event.
isControlDownReturns true if the control key is pressed for the given event.
isMetaDownReturns true if the meta key is pressed for the given event.
getMainEventReturns the touch or mouse event that contains the mouse coordinates.
getClientXReturns true if the meta key is pressed for the given event.
getClientYReturns true if the meta key is pressed for the given event.
consumeConsumes the given event.
Variables
LABEL_HANDLEIndex for the label handle in an mxMouseEvent.
ROTATION_HANDLEIndex for the rotation handle in an mxMouseEvent.
CUSTOM_HANDLEStart index for the custom handles in an mxMouseEvent.
VIRTUAL_HANDLEStart index for the virtual handles in an mxMouseEvent.
MOUSE_DOWNSpecifies the event name for mouseDown.
MOUSE_MOVESpecifies the event name for mouseMove.
MOUSE_UPSpecifies the event name for mouseUp.
ACTIVATESpecifies the event name for activate.
RESIZE_STARTSpecifies the event name for resizeStart.
RESIZESpecifies the event name for resize.
RESIZE_ENDSpecifies the event name for resizeEnd.
MOVE_STARTSpecifies the event name for moveStart.
MOVESpecifies the event name for move.
MOVE_ENDSpecifies the event name for moveEnd.
PAN_STARTSpecifies the event name for panStart.
PANSpecifies the event name for pan.
PAN_ENDSpecifies the event name for panEnd.
MINIMIZESpecifies the event name for minimize.
NORMALIZESpecifies the event name for normalize.
MAXIMIZESpecifies the event name for maximize.
HIDESpecifies the event name for hide.
SHOWSpecifies the event name for show.
CLOSESpecifies the event name for close.
DESTROYSpecifies the event name for destroy.
REFRESHSpecifies the event name for refresh.
SIZESpecifies the event name for size.
SELECTSpecifies the event name for select.
FIREDSpecifies the event name for fired.
FIRE_MOUSE_EVENTSpecifies the event name for fireMouseEvent.
GESTURESpecifies the event name for gesture.
TAP_AND_HOLDSpecifies the event name for tapAndHold.
GETSpecifies the event name for get.
RECEIVESpecifies the event name for receive.
CONNECTSpecifies the event name for connect.
DISCONNECTSpecifies the event name for disconnect.
SUSPENDSpecifies the event name for suspend.
RESUMESpecifies the event name for suspend.
MARKSpecifies the event name for mark.
ROOTSpecifies the event name for root.
POSTSpecifies the event name for post.
OPENSpecifies the event name for open.
SAVESpecifies the event name for open.
BEFORE_ADD_VERTEXSpecifies the event name for beforeAddVertex.
ADD_VERTEXSpecifies the event name for addVertex.
AFTER_ADD_VERTEXSpecifies the event name for afterAddVertex.
DONESpecifies the event name for done.
EXECUTESpecifies the event name for execute.
EXECUTEDSpecifies the event name for executed.
BEGIN_UPDATESpecifies the event name for beginUpdate.
START_EDITSpecifies the event name for startEdit.
END_UPDATESpecifies the event name for endUpdate.
END_EDITSpecifies the event name for endEdit.
BEFORE_UNDOSpecifies the event name for beforeUndo.
UNDOSpecifies the event name for undo.
REDOSpecifies the event name for redo.
CHANGESpecifies the event name for change.
NOTIFYSpecifies the event name for notify.
LAYOUT_CELLSSpecifies the event name for layoutCells.
CLICKSpecifies the event name for click.
SCALESpecifies the event name for scale.
TRANSLATESpecifies the event name for translate.
SCALE_AND_TRANSLATESpecifies the event name for scaleAndTranslate.
UPSpecifies the event name for up.
DOWNSpecifies the event name for down.
ADDSpecifies the event name for add.
REMOVESpecifies the event name for remove.
CLEARSpecifies the event name for clear.
ADD_CELLSSpecifies the event name for addCells.
CELLS_ADDEDSpecifies the event name for cellsAdded.
MOVE_CELLSSpecifies the event name for moveCells.
CELLS_MOVEDSpecifies the event name for cellsMoved.
RESIZE_CELLSSpecifies the event name for resizeCells.
CELLS_RESIZEDSpecifies the event name for cellsResized.
TOGGLE_CELLSSpecifies the event name for toggleCells.
CELLS_TOGGLEDSpecifies the event name for cellsToggled.
ORDER_CELLSSpecifies the event name for orderCells.
CELLS_ORDEREDSpecifies the event name for cellsOrdered.
REMOVE_CELLSSpecifies the event name for removeCells.
CELLS_REMOVEDSpecifies the event name for cellsRemoved.
GROUP_CELLSSpecifies the event name for groupCells.
UNGROUP_CELLSSpecifies the event name for ungroupCells.
REMOVE_CELLS_FROM_PARENTSpecifies the event name for removeCellsFromParent.
FOLD_CELLSSpecifies the event name for foldCells.
CELLS_FOLDEDSpecifies the event name for cellsFolded.
ALIGN_CELLSSpecifies the event name for alignCells.
LABEL_CHANGEDSpecifies the event name for labelChanged.
CONNECT_CELLSpecifies the event name for connectCell.
CELL_CONNECTEDSpecifies the event name for cellConnected.
SPLIT_EDGESpecifies the event name for splitEdge.
FLIP_EDGESpecifies the event name for flipEdge.
START_EDITINGSpecifies the event name for startEditing.
EDITING_STARTEDSpecifies the event name for editingStarted.
EDITING_STOPPEDSpecifies the event name for editingStopped.
ADD_OVERLAYSpecifies the event name for addOverlay.
REMOVE_OVERLAYSpecifies the event name for removeOverlay.
UPDATE_CELL_SIZESpecifies the event name for updateCellSize.
ESCAPESpecifies the event name for escape.
DOUBLE_CLICKSpecifies the event name for doubleClick.
STARTSpecifies the event name for start.
RESETSpecifies the event name for reset.
mxXmlRequestXML HTTP request wrapper.
Functions
mxXmlRequestConstructs an XML HTTP request.
Variables
urlHolds the target URL of the request.
paramsHolds the form encoded data for the POST request.
methodSpecifies the request method.
asyncBoolean indicating if the request is asynchronous.
binaryBoolean indicating if the request is binary.
withCredentialsSpecifies if withCredentials should be used in HTML5-compliant browsers.
usernameSpecifies the username to be used for authentication.
passwordSpecifies the password to be used for authentication.
requestHolds the inner, browser-specific request object.
decodeSimulateValuesSpecifies if request values should be decoded as URIs before setting the textarea value in simulate.
Functions
isBinaryReturns binary.
setBinarySets binary.
getTextReturns the response as a string.
isReadyReturns true if the response is ready.
getDocumentElementReturns the document element of the response XML document.
getXmlReturns the response as an XML document.
getTextReturns the response as a string.
getStatusReturns the status as a number, eg.
createCreates and returns the inner request object.
sendSend the request to the target URL using the specified functions to process the response asychronously.
setRequestHeadersSets the headers for the given request and parameters.
simulateCreates and posts a request to the given target URL using a dynamically created form inside the given document.
mxClipboardSingleton that implements a clipboard for graph cells.
Variables
STEPSIZEDefines the step size to offset the cells after each paste operation.
insertCountCounts the number of times the clipboard data has been inserted.
cellsHolds the array of mxCells currently in the clipboard.
Functions
setCellsSets the cells in the clipboard.
getCellsReturns the cells in the clipboard.
isEmptyReturns true if the clipboard currently has not data stored.
cutCuts the given array of mxCells from the specified graph.
removeCellsHook to remove the given cells from the given graph after a cut operation.
copyCopies the given array of mxCells from the specified graph to cells.
pastePastes the cells into the specified graph restoring the relation to <parents>, if possible.
mxWindowBasic window inside a document.
Events
mxEvent.MOVE_STARTFires before the window is moved.
mxEvent.MOVEFires while the window is being moved.
mxEvent.MOVE_ENDFires after the window is moved.
mxEvent.RESIZE_STARTFires before the window is resized.
mxEvent.RESIZEFires while the window is being resized.
mxEvent.RESIZE_ENDFires after the window is resized.
mxEvent.MAXIMIZEFires after the window is maximized.
mxEvent.MINIMIZEFires after the window is minimized.
mxEvent.NORMALIZEFires after the window is normalized, that is, it returned from maximized or minimized state.
mxEvent.ACTIVATEFires after a window is activated.
mxEvent.SHOWFires after the window is shown.
mxEvent.HIDEFires after the window is hidden.
mxEvent.CLOSEFires before the window is closed.
mxEvent.DESTROYFires before the window is destroyed.
Functions
mxWindowConstructs a new window with the given dimension and title to display the specified content.
Variables
closeImageURL of the image to be used for the close icon in the titlebar.
minimizeImageURL of the image to be used for the minimize icon in the titlebar.
normalizeImageURL of the image to be used for the normalize icon in the titlebar.
maximizeImageURL of the image to be used for the maximize icon in the titlebar.
normalizeImageURL of the image to be used for the resize icon.
visibleBoolean flag that represents the visible state of the window.
minimumSizemxRectangle that specifies the minimum width and height of the window.
destroyOnCloseSpecifies if the window should be destroyed when it is closed.
contentHeightCorrectionDefines the correction factor for computing the height of the contentWrapper.
titleReference to the DOM node (TD) that contains the title.
contentReference to the DOM node that represents the window content.
Functions
initInitializes the DOM tree that represents the window.
setTitleSets the window title to the given string.
setScrollableSets if the window contents should be scrollable.
activatePuts the window on top of all other windows.
getElementReturuns the outermost DOM node that makes up the window.
fitMakes sure the window is inside the client area of the window.
isResizableReturns true if the window is resizable.
setResizableSets if the window should be resizable.
setSizeSets the size of the window.
setMinimizableSets if the window is minimizable.
getMinimumSizeReturns an mxRectangle that specifies the size for the minimized window.
installMinimizeHandlerInstalls the event listeners required for minimizing the window.
setMaximizableSets if the window is maximizable.
installMaximizeHandlerInstalls the event listeners required for maximizing the window.
installMoveHandlerInstalls the event listeners required for moving the window.
setLocationSets the upper, left corner of the window.
getXReturns the current position on the x-axis.
getYReturns the current position on the y-axis.
installCloseHandlerAdds the closeImage as a new image node in <closeImg> and installs the <close> event.
setImageSets the image associated with the window.
setClosableSets the image associated with the window.
isVisibleReturns true if the window is visible.
setVisibleShows or hides the window depending on the given flag.
showShows the window.
hideHides the window.
destroyDestroys the window and removes all associated resources.
mxFormA simple class for creating HTML forms.
Functions
mxFormCreates a HTML table using the specified classname.
Variables
tableHolds the DOM node that represents the table.
bodyHolds the DOM node that represents the tbody (table body).
Functions
getTableReturns the table that contains this form.
addButtonsHelper method to add an OK and Cancel button using the respective functions.
addTextAdds an input for the given name, type and value and returns it.
addCheckboxAdds a checkbox for the given name and value and returns the textfield.
addTextareaAdds a textarea for the given name and value and returns the textarea.
addComboAdds a combo for the given name and returns the combo.
addOptionAdds an option for the given label to the specified combo.
addFieldAdds a new row with the name and the input field in two columns and returns the given input.
mxImageEncapsulates the URL, width and height of an image.
Functions
mxImageConstructs a new image.
Variables
srcString that specifies the URL of the image.
widthInteger that specifies the width of the image.
heightInteger that specifies the height of the image.
mxDivResizerMaintains the size of a div element in Internet Explorer.
Functions
mxDivResizerConstructs an object that maintains the size of a div element when the window is being resized.
resizeWidthBoolean specifying if the width should be updated.
resizeHeightBoolean specifying if the height should be updated.
handlingResizeBoolean specifying if the width should be updated.
resizeUpdates the style of the DIV after the window has been resized.
getDocumentWidthHook for subclassers to return the width of the document (without scrollbars).
getDocumentHeightHook for subclassers to return the height of the document (without scrollbars).
mxDragSourceWrapper to create a drag source from a DOM element so that the element can be dragged over a graph and dropped into the graph as a new cell.
Functions
mxDragSourceConstructs a new drag source for the given element.
Variables
elementReference to the DOM node which was made draggable.
dropHandlerHolds the DOM node that is used to represent the drag preview.
dragOffsetmxPoint that specifies the offset of the dragElement.
dragElementHolds the DOM node that is used to represent the drag preview.
previewElementOptional mxRectangle that specifies the unscaled size of the preview.
enabledSpecifies if this drag source is enabled.
currentGraphReference to the mxGraph that is the current drop target.
currentDropTargetHolds the current drop target under the mouse.
currentPointHolds the current drop location.
currentGuideHolds an mxGuide for the currentGraph if <dragPreview> is not null.
currentGuideHolds an mxGuide for the currentGraph if <dragPreview> is not null.
autoscrollSpecifies if the graph should scroll automatically.
guidesEnabledSpecifies if mxGuide should be enabled.
gridEnabledSpecifies if the grid should be allowed.
highlightDropTargetsSpecifies if drop targets should be highlighted.
dragElementZIndexZIndex for the drag element.
dragElementOpacityOpacity of the drag element in %.
checkEventSourceWhether the event source should be checked in <graphContainerEvent>.
Functions
isEnabledReturns enabled.
setEnabledSets enabled.
isGuidesEnabledReturns guidesEnabled.
setGuidesEnabledSets guidesEnabled.
isGridEnabledReturns gridEnabled.
setGridEnabledSets gridEnabled.
getGraphForEventReturns the graph for the given mouse event.
getDropTargetReturns the drop target for the given graph and coordinates.
createDragElementCreates and returns a clone of the <dragElementPrototype> or the element if the former is not defined.
createPreviewElementCreates and returns an element which can be used as a preview in the given graph.
isActiveReturns true if this drag source is active.
resetStops and removes everything and restores the state of the object.
mouseDownReturns the drop target for the given graph and coordinates.
startDragCreates the dragElement using createDragElement.
stopDragInvokes removeDragElement.
removeDragElementRemoves and destroys the dragElement.
getElementForEventReturns the topmost element under the given event.
graphContainsEventReturns true if the given graph contains the given event.
mouseMoveGets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.
mouseUpProcesses the mouse up event and invokes drop, dragExit and stopDrag as required.
removeListenersActives the given graph as a drop target.
dragEnterActives the given graph as a drop target.
dragExitDeactivates the given graph as a drop target.
dragOverImplements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.
dropReturns the drop target for the given graph and coordinates.
mxToolbarCreates a toolbar inside a given DOM node.
Events
mxEvent.SELECTFires when an item was selected in the toolbar.
Functions
mxToolbarConstructs a toolbar in the specified container.
Variables
containerReference to the DOM nodes that contains the toolbar.
enabledSpecifies if events are handled.
noResetSpecifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar.
updateDefaultModeBoolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode.
Functions
addItemAdds the given function as an image with the specified title and icon and returns the new image node.
addComboAdds and returns a new SELECT element using the given style.
addComboAdds and returns a new SELECT element using the given title as the default element.
addOptionAdds and returns a new OPTION element inside the given SELECT element.
addSwitchModeAdds a new selectable item to the toolbar.
addModeAdds a new item to the toolbar.
selectModeResets the state of the previously selected mode and displays the given DOM node as selected.
resetModeSelects the default mode and resets the state of the previously selected mode.
addSeparatorAdds the specifies image as a separator.
addBreakAdds a break to the container.
addLineAdds a horizontal line to the container.
destroyRemoves the toolbar and all its associated resources.
mxUndoableEditImplements a composite undoable edit.
Events
mxEvent.EXECUTEDFires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.START_EDITFires before a set of changes will be executed in undo or redo.
mxEvent.END_EDITFires after a set of changeswas executed in undo or redo.
Functions
mxUndoableEditConstructs a new undoable edit for the given source.
Variables
sourceSpecifies the source of the edit.
changesArray that contains the changes that make up this edit.
significantSpecifies if the undoable change is significant.
undoneSpecifies if this edit has been undone.
redoneSpecifies if this edit has been redone.
Functions
isEmptyReturns true if the this edit contains no changes.
isSignificantReturns significant.
addAdds the specified change to this edit.
notifyHook to notify any listeners of the changes after an undo or redo has been carried out.
dieHook to free resources after the edit has been removed from the command history.
undoUndoes all changes in this edit.
redoRedoes all changes in this edit.
mxUndoManagerImplements a command history.
Events
mxEvent.CLEARFires after clear was invoked.
mxEvent.UNDOFires afer a significant edit was undone in undo.
mxEvent.REDOFires afer a significant edit was redone in redo.
mxEvent.ADDFires after an undoable edit was added to the history.
Functions
mxUndoManagerConstructs a new undo manager with the given history size.
Variables
sizeMaximum command history size.
historyArray that contains the steps of the command history.
indexOfNextAddIndex of the element to be added next.
Functions
isEmptyReturns true if the history is empty.
clearClears the command history.
canUndoReturns true if an undo is possible.
undoUndoes the last change.
canRedoReturns true if a redo is possible.
redoRedoes the last change.
undoableEditHappenedMethod to be called to add new undoable edits to the history.
trimRemoves all pending steps after indexOfNextAdd from the history, invoking die on each edit.
mxUrlConverterConverts relative and absolute URLs to absolute URLs with protocol and domain.
Variables
enabledSpecifies if the converter is enabled.
baseUrlSpecifies the base URL to be used as a prefix for relative URLs.
baseDomainSpecifies the base domain to be used as a prefix for absolute URLs.
Functions
updateBaseUrlPrivate helper function to update the base URL.
isEnabledReturns enabled.
setEnabledSets enabled.
getBaseUrlReturns baseUrl.
setBaseUrlSets baseUrl.
getBaseDomainReturns baseDomain.
setBaseDomainSets baseDomain.
isRelativeUrlReturns true if the given URL is relative.
convertConverts the given URL to an absolute URL with protol and domain.
mxPanningManagerImplements a handler for panning.
Variables
damperDamper value for the panning.
delayDelay in milliseconds for the panning.
handleMouseOutSpecifies if mouse events outside of the component should be handled.
borderBorder to handle automatic panning inside the component.
mxPopupMenuBasic popup menu.
Functions
mxPopupMenuConstructs a popupmenu.
Events
mxEvent.SHOWFires after the menu has been shown in popup.
Variables
submenuImageURL of the image to be used for the submenu icon.
zIndexSpecifies the zIndex for the popupmenu and its shadow.
factoryMethodFunction that is used to create the popup menu.
useLeftButtonForPopupSpecifies if popupmenus should be activated by clicking the left mouse button.
enabledSpecifies if events are handled.
itemCountContains the number of times addItem has been called for a new menu.
autoExpandSpecifies if submenus should be expanded on mouseover.
smartSeparatorsSpecifies if separators should only be added if a menu item follows them.
labelsSpecifies if any labels should be visible.
Functions
initInitializes the shapes required for this vertex handler.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isPopupTriggerReturns true if the given event is a popupmenu trigger for the optional given cell.
addItemAdds the given item to the given parent item.
createSubmenuCreates the nodes required to add submenu items inside the given parent item.
showSubmenuShows the submenu inside the given parent row.
addSeparatorAdds a horizontal separator in the given parent item or the top-level menu if no parent is specified.
popupShows the popup menu for the given event and cell.
isMenuShowingReturns true if the menu is showing.
showMenuShows the menu.
hideMenuRemoves the menu and all submenus.
hideSubmenuRemoves all submenus inside the given parent.
destroyDestroys the handler and all its resources and DOM nodes.
mxAutoSaveManagerManager for automatically saving diagrams.
Functions
mxAutoSaveManagerConstructs a new automatic layout for the given graph.
Variables
graphReference to the enclosing mxGraph.
autoSaveDelayMinimum amount of seconds between two consecutive autosaves.
autoSaveThrottleMinimum amount of seconds between two consecutive autosaves triggered by more than <autoSaveThreshhold> changes within a timespan of less than autoSaveDelay seconds.
autoSaveThresholdMinimum amount of ignored changes before an autosave.
ignoredChangesCounter for ignored changes in autosave.
lastSnapshotUsed for autosaving.
enabledSpecifies if event handling is enabled.
changeHandlerHolds the function that handles graph model changes.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
setGraphSets the graph that the layouts operate on.
saveEmpty hook that is called if the graph should be saved.
graphModelChangedInvoked when the graph model has changed.
resetResets all counters.
destroyRemoves all handlers from the graph and deletes the reference to it.
mxAnimationImplements a basic animation in JavaScript.
Functions
mxAnimationConstructs an animation.
Variables
delaySpecifies the delay between the animation steps.
threadReference to the thread while the animation is running.
Functions
isRunningReturns true if the animation is running.
startAnimationStarts the animation by repeatedly invoking updateAnimation.
updateAnimationHook for subclassers to implement the animation.
stopAnimationStops the animation by deleting the timer and fires an mxEvent.DONE.
mxMorphingImplements animation for morphing cells.
Functions
mxMorphingConstructs an animation.
Variables
graphSpecifies the delay between the animation steps.
stepsSpecifies the maximum number of steps for the morphing.
stepContains the current step.
easeEase-off for movement towards the given vector.
cellsOptional array of cells to be animated.
Functions
updateAnimationAnimation step.
showShows the changes in the given mxCellStatePreview.
animateCellAnimates the given cell state using mxCellStatePreview.moveState.
stopRecursionReturns true if the animation should not recursively find more deltas for children if the given parent state has been animated.
getDeltaReturns the vector between the current rendered state and the future location of the state after the display will be updated.
getOriginForCellReturns the top, left corner of the given cell.
mxImageBundleMaps from keys to base64 encoded images or file locations.
Variables
imagesMaps from keys to images.
altSpecifies if the fallback representation should be returned.
Functions
putImageAdds the specified entry to the map.
getImageReturns the value for the given key.
mxImageExportCreates a new image export instance to be used with an export canvas.
Functions
mxImageExportConstructs a new image export.
Variables
includeOverlaysSpecifies if overlays should be included in the export.
Functions
drawStateDraws the given state and all its descendants to the given canvas.
drawStateDraws the given state and all its descendants to the given canvas.
getLinkForCellStateReturns the link for the given cell state and canvas.
drawCellStateDraws the given state to the given canvas.
drawShapeDraws the shape of the given state.
drawTextDraws the text of the given state.
drawOverlaysDraws the overlays for the given state.
mxAbstractCanvas2DBase class for all canvases.
Functions
mxAbstractCanvas2DConstructs a new abstract canvas.
Variables
converterHolds the mxUrlConverter to convert image URLs.
stateHolds the current state.
statesStack of states.
pathHolds the current path as an array.
rotateHtmlSwitch for rotation of HTML.
lastXHolds the last x coordinate.
lastYHolds the last y coordinate.
moveOpContains the string used for moving in paths.
lineOpContains the string used for moving in paths.
quadOpContains the string used for quadratic paths.
curveOpContains the string used for bezier curves.
closeOpHolds the operator for closing curves.
pointerEventsBoolean value that specifies if events should be handled.
Functions
createUrlConverterCreate a new mxUrlConverter and returns it.
resetResets the state of this canvas.
createStateCreates the state of the this canvas.
formatRounds all numbers to integers.
addOpAdds the given operation to the path.
rotatePointRotates the given point and returns the result as an mxPoint.
saveSaves the current state.
restoreRestores the current state.
setLinkSets the current link.
scaleScales the current state.
translateTranslates the current state.
rotateRotates the current state.
setAlphaSets the current alpha.
setFillAlphaSets the current solid fill alpha.
setStrokeAlphaSets the current stroke alpha.
setFillColorSets the current fill color.
setGradientSets the current gradient.
setStrokeColorSets the current stroke color.
setStrokeWidthSets the current stroke width.
setDashedEnables or disables dashed lines.
setDashPatternSets the current dash pattern.
setLineCapSets the current line cap.
setLineJoinSets the current line join.
setMiterLimitSets the current miter limit.
setFontColorSets the current font color.
setFontColorSets the current font color.
setFontColorSets the current font color.
setFontSizeSets the current font size.
setFontFamilySets the current font family.
setFontStyleSets the current font style.
setShadowEnables or disables and configures the current shadow.
setShadowColorEnables or disables and configures the current shadow.
setShadowAlphaEnables or disables and configures the current shadow.
setShadowOffsetEnables or disables and configures the current shadow.
beginStarts a new path.
moveToMoves the current path the given coordinates.
lineToDraws a line to the given coordinates.
quadToAdds a quadratic curve to the current path.
curveToAdds a bezier curve to the current path.
arcToAdds the given arc to the current path.
closeCloses the current path.
endEmpty implementation for backwards compatibility.
mxXmlCanvas2DBase class for all canvases.
Functions
mxXmlCanvas2DConstructs a new abstract canvas.
Variables
rootReference to the container for the SVG content.
textEnabledSpecifies if text output should be enabled.
compressedSpecifies if the output should be compressed by removing redundant calls.
Functions
writeDefaults
formatReturns a formatted number with 2 decimal places.
createElementCreates the given element using the owner document of root.
saveSaves the drawing state.
restoreRestores the drawing state.
scaleScales the output.
translateTranslates the output.
rotateRotates and/or flips the output around a given center.
setAlphaSets the current alpha.
setFillAlphaSets the current fill alpha.
setStrokeAlphaSets the current stroke alpha.
setFillColorSets the current fill color.
setGradientSets the gradient.
setStrokeColorSets the current stroke color.
setStrokeWidthSets the current stroke width.
setDashedEnables or disables dashed lines.
setDashPatternSets the current dash pattern.
setLineCapSets the line cap.
setLineJoinSets the line join.
setMiterLimitSets the miter limit.
setFontColorSets the current font color.
setFontBackgroundColorSets the current font background color.
setFontBorderColorSets the current font border color.
setFontSizeSets the current font size.
setFontFamilySets the current font family.
setFontStyleSets the current font style.
setShadowEnables or disables shadows.
setShadowColorSets the current shadow color.
setShadowAlphaSets the current shadows alpha.
setShadowOffsetSets the current shadow offset.
rectPuts a rectangle into the drawing buffer.
roundrectPuts a rounded rectangle into the drawing buffer.
ellipsePuts an ellipse into the drawing buffer.
imagePaints an image.
beginStarts a new path and puts it into the drawing buffer.
moveToMoves the current path the given point.
lineToDraws a line to the given coordinates.
quadToAdds a quadratic curve to the current path.
curveToAdds a bezier curve to the current path.
closeCloses the current path.
textPaints the given text.
strokePaints the outline of the current drawing buffer.
fillFills the current drawing buffer.
fillAndStrokeFills the current drawing buffer and its outline.
mxSvgCanvas2DExtends mxAbstractCanvas2D to implement a canvas for SVG.
Functions
mxSvgCanvas2DConstructs a new SVG canvas.
Variables
rootReference to the container for the SVG content.
gradientsLocal cache of gradients for quick lookups.
defsReference to the defs section of the SVG document.
styleEnabledStores the value of styleEnabled passed to the constructor.
pathHolds the current DOM node.
matchHtmlAlignmentSpecifies if plain text output should match the vertical HTML alignment.
textEnabledSpecifies if text output should be enabled.
foEnabledSpecifies if use of foreignObject for HTML markup is allowed.
foAltTextSpecifies the fallback text for unsupported foreignObjects in exported documents.
foOffsetOffset to be used for foreignObjects.
textOffsetOffset to be used for text elements.
imageOffsetOffset to be used for image elements.
strokeToleranceAdds transparent paths for strokes.
minStrokeWidthMinimum stroke width for output.
refCountLocal counter for references in SVG export.
blockImagePointerEventsSpecifies if a transparent rectangle should be added on top of images to absorb all pointer events.
lineHeightCorrectionCorrection factor for mxConstants.LINE_HEIGHT in HTML output.
pointerEventsValueDefault value for active pointer events.
fontMetricsPaddingPadding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
cacheOffsetSizeSpecifies if offsetWidth and offsetHeight should be cached.
Functions
formatRounds all numbers to 2 decimal points.
getBaseUrlReturns the URL of the page without the hash part.
resetReturns any offsets for rendering pixels.
createStyleCreates the optional style section.
createElementPrivate helper function to create SVG elements
getAlternateContentReturns the alternate content for the given foreignObject.
createGradientIdPrivate helper function to create SVG elements
getSvgGradientPrivate helper function to create SVG elements
createSvgGradientCreates the given SVG gradient.
addNodePrivate helper function to create SVG elements
updateFillTransfers the stroke attributes from <state> to <node>.
getCurrentStrokeWidthReturns the current stroke width (>= 1), ie.
updateStrokeTransfers the stroke attributes from <state> to <node>.
updateStrokeAttributesTransfers the stroke attributes from <state> to <node>.
createDashPatternCreates the SVG dash pattern for the given state.
createToleranceCreates a hit detection tolerance shape for the given node.
createShadowCreates a shadow for the given node.
setLinkExperimental implementation for hyperlinks.
rotateSets the rotation of the canvas.
beginExtends superclass to create path.
rectPrivate helper function to create SVG elements
roundrectPrivate helper function to create SVG elements
ellipsePrivate helper function to create SVG elements
imagePrivate helper function to create SVG elements
convertHtmlConverts the given HTML string to XHTML.
createDivPrivate helper function to create SVG elements
textPaints the given text.
createClipCreates a clip for the given coordinates.
textPaints the given text.
updateFontUpdates the text properties for the given node.
addTextBackgroundBackground color and border
strokePaints the outline of the current path.
fillFills the current path.
fillAndStrokeFills and paints the outline of the current path.
mxVmlCanvas2DImplements a canvas to be used for rendering VML.
Variables
rootReference to the container for the SVG content.
pathHolds the current DOM node.
textEnabledSpecifies if text output should be enabledetB.
moveOpContains the string used for moving in paths.
lineOpContains the string used for moving in paths.
curveOpContains the string used for bezier curves.
closeOpHolds the operator for closing curves.
rotatedHtmlBackgroundBackground color for rotated HTML.
vmlScaleSpecifies the scale used to draw VML shapes.
Functions
createElementCreates the given element using the document.
createVmlElementCreates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.
addNodeAdds the current node to the root.
createTransparentFillCreates a transparent fill.
createFillCreates a fill for the current state.
createStrokeCreates a fill for the current state.
getVmlDashPatternReturns a VML dash pattern for the current dashPattern.
createShadowCreates a shadow for the given node.
createShadowFillCreates the fill for the shadow.
createShadowStrokeCreates the stroke for the shadow.
rotateSets the rotation of the canvas.
beginExtends superclass to create path.
quadToReplaces quadratic curve with bezier curve in VML.
createRectSets the glass gradient.
rectSets the current path to a rectangle.
roundrectSets the current path to a rounded rectangle.
ellipseSets the current path to an ellipse.
imagePaints an image.
createTextCreates the innermost element that contains the HTML text.
textPaints the given text.
plainTextPaints the outline of the current path.
strokePaints the outline of the current path.
fillFills the current path.
fillAndStrokeFills and paints the outline of the current path.
mxGuideImplements the alignment of selection cells to other cells in the graph.
Functions
mxGuideConstructs a new guide object.
Variables
graphReference to the enclosing mxGraph instance.
statesContains the mxCellStates that are used for alignment.
horizontalSpecifies if horizontal guides are enabled.
verticalSpecifies if vertical guides are enabled.
verticalHolds the mxShape for the horizontal guide.
verticalHolds the mxShape for the vertical guide.
roundedSpecifies if rounded coordinates should be used.
Functions
setStatesSets the mxCellStates that should be used for alignment.
isEnabledForEventReturns true if the guide should be enabled for the given native event.
getGuideToleranceReturns the tolerance for the guides.
createGuideShapeReturns the mxShape to be used for painting the respective guide.
moveMoves the <bounds> by the given mxPoint and returnt the snapped point.
hideHides all current guides.
hideHides all current guides.
hideHides all current guides.
setVisibleShows or hides the current guides.
destroyDestroys all resources that this object uses.
mxShapeBase class for all shapes.
Functions
mxShapeConstructs a new shape.
Variables
dialectHolds the dialect in which the shape is to be painted.
scaleHolds the scale in which the shape is being painted.
antiAliasRendering hint for configuring the canvas.
minSvgStrokeWidthMinimum stroke width for SVG output.
boundsHolds the mxRectangle that specifies the bounds of this shape.
pointsHolds the array of mxPoints that specify the points of this shape.
nodeHolds the outermost DOM node that represents this shape.
stateOptional reference to the corresponding mxCellState.
styleOptional reference to the style of the corresponding mxCellState.
boundingBoxContains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
stencilHolds the mxStencil that defines the shape.
svgStrokeToleranceEvent-tolerance for SVG strokes (in px).
pointerEventsSpecifies if pointer events should be handled.
svgPointerEventsSpecifies if pointer events should be handled.
shapePointerEventsSpecifies if pointer events outside of shape should be handled.
stencilPointerEventsSpecifies if pointer events outside of stencils should be handled.
vmlScaleScale for improving the precision of VML rendering.
outlineSpecifies if the shape should be drawn as an outline.
visibleSpecifies if the shape is visible.
useSvgBoundingBoxAllows to use the SVG bounding box in SVG.
Functions
initInitializes the shape by creaing the DOM node using create and adding it into the given container.
initStylesSets the styles to their default values.
isParseVmlSpecifies if any VML should be added via insertAdjacentHtml to the DOM.
isHtmlAllowedReturns true if HTML is allowed for this shape.
getSvgScreenOffsetReturns 0, or 0.5 if <strokewidth> % 2 == 1.
createCreates and returns the DOM node(s) for the shape in the given container.
createSvgCreates and returns the SVG node(s) to represent this shape.
createVmlCreates and returns the VML node to represent this shape.
createHtmlCreates and returns the HTML DOM node(s) to represent this shape.
reconfigureReconfigures this shape.
redrawCreates and returns the SVG node(s) to represent this shape.
clearRemoves all child nodes and resets all CSS.
updateBoundsFromPointsUpdates the bounds based on the points.
getLabelBoundsReturns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
getLabelMarginsReturns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
checkBoundsReturns true if the bounds are not null and all of its variables are numeric.
createVmlGroupReturns the temporary element used for rendering in IE8 standards mode.
redrawShapeUpdates the SVG or VML shape.
createCanvasCreates a new canvas for drawing this shape.
createSvgCanvasCreates and returns an mxSvgCanvas2D for rendering this shape.
createVmlCanvasCreates and returns an mxVmlCanvas2D for rendering this shape.
updateVmlContainerUpdates the bounds of the VML container.
redrawHtmlAllow optimization by replacing VML with HTML.
updateHtmlFiltersAllow optimization by replacing VML with HTML.
mixedModeHtmlAllow optimization by replacing VML with HTML.
mixedModeHtmlAllow optimization by replacing VML with HTML.
destroyCanvasDestroys the given canvas which was used for drawing.
paintGeneric rendering code.
configureCanvasSets the state of the canvas for drawing the shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
updateTransformSets the scale and rotation on the given canvas.
paintVertexShapePaints the vertex shape.
paintBackgroundHook for subclassers.
paintForegroundHook for subclassers.
paintEdgeShapeHook for subclassers.
getArcSizeReturns the arc size for the given dimension.
paintGlassEffectPaints the glass gradient effect.
addPointsPaints the given points with rounded corners.
resetStylesResets all styles.
applyApplies the style of the given mxCellState to the shape.
setCursorSets the cursor on the given shape.
getCursorReturns the current cursor.
isRoundableHook for subclassers.
updateBoundingBoxUpdates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
createBoundingBoxReturns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
augmentBoundingBoxAugments the bounding box with the strokewidth and shadow offsets.
isPaintBoundsInvertedReturns true if the bounds should be inverted.
getRotationReturns the rotation from the style.
getTextRotationReturns the rotation for the text label.
getShapeRotationReturns the actual rotation of the shape.
createTransparentSvgRectangleAdds a transparent rectangle that catches all events.
setTransparentBackgroundImageSets a transparent background CSS style to catch all events.
releaseSvgGradientsPaints the line shape.
destroyDestroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
mxStencilImplements a generic shape which is based on a XML node as a description.
Functions
mxStencilConstructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.
Variables
defaultLocalizedStatic global variable that specifies the default value for the localized attribute of the text element.
Functions
allowEvalStatic global switch that specifies if the use of eval is allowed for evaluating text content and images.
Variables
descHolds the XML node with the stencil description.
constraintsHolds an array of mxConnectionConstraints as defined in the shape.
aspectHolds the aspect of the shape.
w0Holds the width of the shape.
h0Holds the height of the shape.
bgNodesHolds the XML node with the stencil description.
fgNodesHolds the XML node with the stencil description.
strokewidthHolds the strokewidth direction from the description.
Functions
parseDescriptionReads w0, h0, aspect, bgNodes and fgNodes from desc.
parseConstraintsReads the constraints from desc into constraints using parseConstraint.
parseConstraintParses the given XML node and returns its mxConnectionConstraint.
evaluateTextAttributeGets the given attribute as a text.
evaluateAttributeGets the attribute for the given name from the given node.
drawShapeDraws this stencil inside the given bounds.
drawChildrenDraws this stencil inside the given bounds.
computeAspectReturns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.
drawNodeDraws this stencil inside the given bounds.
mxStencilRegistryA singleton class that provides a registry for stencils and the methods for painting those stencils onto a canvas or into a DOM.
Functions
addStencilAdds the given mxStencil.
getStencilReturns the mxStencil for the given name.
mxMarkerA static class that implements all markers for VML and SVG using a registry.
Variables
markersMaps from markers names to functions to paint the markers.
Functions
addMarkerAdds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.
createMarkerReturns a function to paint the given marker.
mxActorExtends mxShape to implement an actor shape.
Functions
mxActorConstructs a new actor shape.
paintVertexShapeRedirects to redrawPath for subclasses to work.
redrawPathDraws the path for this shape.
mxCloudExtends mxActor to implement a cloud shape.
Functions
mxCloudConstructs a new cloud shape.
redrawPathDraws the path for this shape.
mxRectangleShapeExtends mxShape to implement a rectangle shape.
Functions
mxRectangleShapeConstructs a new rectangle shape.
isHtmlAllowedReturns true for non-rounded, non-rotated shapes with no glass gradient.
paintBackgroundGeneric background painting implementation.
isRoundableAdds roundable support.
paintForegroundGeneric background painting implementation.
mxEllipseExtends mxShape to implement an ellipse shape.
Functions
mxEllipseConstructs a new ellipse shape.
paintVertexShapePaints the ellipse shape.
mxDoubleEllipseExtends mxShape to implement a double ellipse shape.
Functions
mxDoubleEllipseConstructs a new ellipse shape.
Variables
vmlScaleScale for improving the precision of VML rendering.
Functions
paintBackgroundPaints the background.
paintForegroundPaints the foreground.
getLabelBoundsReturns the bounds for the label.
mxRhombusExtends mxShape to implement a rhombus (aka diamond) shape.
Functions
mxRhombusConstructs a new rhombus shape.
isRoundableAdds roundable support.
paintVertexShapeGeneric painting implementation.
mxPolylineExtends mxShape to implement a polyline (a line with multiple points).
Functions
mxPolylineConstructs a new polyline shape.
getRotationReturns 0.
getShapeRotationReturns 0.
isPaintBoundsInvertedReturns false.
paintEdgeShapePaints the line shape.
paintLinePaints the line shape.
paintLinePaints the line shape.
mxArrowExtends mxShape to implement an arrow shape.
Functions
mxArrowConstructs a new arrow shape.
augmentBoundingBoxAugments the bounding box with the edge width and markers.
paintEdgeShapePaints the line shape.
mxArrowConnectorExtends mxShape to implement an new rounded arrow shape with support for waypoints and double arrows.
Functions
mxArrowConnectorConstructs a new arrow shape.
Variables
useSvgBoundingBoxAllows to use the SVG bounding box in SVG.
resetStylesOverrides mxShape to reset spacing.
Functions
augmentBoundingBoxAugments the bounding box with the edge width and markers.
paintEdgeShapePaints the line shape.
paintEdgeShapePaints the line shape.
isArrowRoundedReturns wether the arrow is rounded
getStartArrowWidthReturns the width of the start arrow
getEndArrowWidthReturns the width of the end arrow
getEdgeWidthReturns the width of the body of the edge
isOpenEndedReturns whether the ends of the shape are drawn
isMarkerStartReturns whether the start marker is drawn
isMarkerEndReturns whether the end marker is drawn
mxTextExtends mxShape to implement a text shape.
Functions
mxTextConstructs a new text shape.
Variables
baseSpacingTopSpecifies the spacing to be added to the top spacing.
baseSpacingBottomSpecifies the spacing to be added to the bottom spacing.
baseSpacingLeftSpecifies the spacing to be added to the left spacing.
baseSpacingRightSpecifies the spacing to be added to the right spacing.
replaceLinefeedsSpecifies if linefeeds in HTML labels should be replaced with BR tags.
verticalTextRotationRotation for vertical text.
ignoreClippedStringSizeSpecifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle.
ignoreStringSizeSpecifies if the actual string size should be measured.
textWidthPaddingSpecifies the padding to be added to the text width for the bounding box.
lastValueContains the last rendered text value.
cacheEnabledSpecifies if caching for HTML labels should be enabled.
Functions
isParseVmlText shapes do not contain VML markup and do not need to be parsed.
isHtmlAllowedReturns true if HTML is allowed for this shape.
getSvgScreenOffsetDisables offset in IE9 for crisper image output.
checkBoundsReturns true if the bounds are not null and all of its variables are numeric.
paintGeneric rendering code.
redrawRenders the text using the given DOM nodes.
resetStylesResets all styles.
applyExtends mxShape to update the text styles.
getAutoDirectionUsed to determine the automatic text direction.
updateBoundingBoxUpdates the <boundingBox> for this shape using the given node and position.
getShapeRotationReturns 0 to avoid using rotation in the canvas via updateTransform.
getTextRotationReturns the rotation for the text label of the corresponding shape.
isPaintBoundsInvertedInverts the bounds if <mxShape.isBoundsInverted> returns true or if the horizontal style is false.
configureCanvasSets the state of the canvas for drawing the shape.
updateVmlContainerSets the width and height of the container to 1px.
redrawHtmlShapeUpdates the HTML node(s) to reflect the latest bounds and scale.
updateHtmlTransformReturns the spacing as an mxPoint.
setInnerHtmlSets the inner HTML of the given element to the <value>.
updateHtmlFilterRotated text rendering quality is bad for IE9 quirks/IE8 standards
updateValueUpdates the HTML node(s) to reflect the latest bounds and scale.
updateFontUpdates the HTML node(s) to reflect the latest bounds and scale.
updateSizeUpdates the HTML node(s) to reflect the latest bounds and scale.
getMarginReturns the spacing as an mxPoint.
getSpacingReturns the spacing as an mxPoint.
mxTriangleImplementation of the triangle shape.
Functions
mxTriangleConstructs a new triangle shape.
isRoundableAdds roundable support.
redrawPathDraws the path for this shape.
mxHexagonImplementation of the hexagon shape.
Functions
mxHexagonConstructs a new hexagon shape.
redrawPathDraws the path for this shape.
mxLineExtends mxShape to implement a horizontal line shape.
Functions
mxLineConstructs a new line shape.
paintVertexShapeRedirects to redrawPath for subclasses to work.
mxImageShapeExtends mxShape to implement an image shape.
Functions
mxImageShapeConstructs a new image shape.
Variables
preserveImageAspectSwitch to preserve image aspect.
Functions
getSvgScreenOffsetDisables offset in IE9 for crisper image output.
applyOverrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.
isHtmlAllowedReturns true if HTML is allowed for this shape.
createHtmlCreates and returns the HTML DOM node(s) to represent this shape.
isRoundableDisables inherited roundable support.
paintVertexShapeGeneric background painting implementation.
redrawOverrides mxShape.redraw to preserve the aspect ratio of images.
mxLabelExtends mxShape to implement an image shape with a label.
Functions
mxLabelConstructs a new label shape.
Variables
imageSizeDefault width and height for the image.
spacingDefault value for image spacing.
indicatorSizeDefault width and height for the indicicator.
indicatorSpacingDefault spacing between image and indicator.
Functions
initInitializes the shape and the <indicator>.
redrawReconfigures this shape.
isHtmlAllowedReturns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.
paintForegroundGeneric background painting implementation.
paintImageGeneric background painting implementation.
getImageBoundsGeneric background painting implementation.
paintIndicatorGeneric background painting implementation.
getIndicatorBoundsGeneric background painting implementation.
redrawHtmlShapeGeneric background painting implementation.
mxCylinderExtends mxShape to implement an cylinder shape.
Functions
mxCylinderConstructs a new cylinder shape.
Variables
maxHeightDefines the maximum height of the top and bottom part of the cylinder shape.
svgStrokeToleranceSets stroke tolerance to 0 for SVG.
Functions
paintVertexShapeRedirects to redrawPath for subclasses to work.
redrawPathDraws the path for this shape.
redrawPathDraws the path for this shape.
mxConnectorExtends mxShape to implement a connector shape.
Functions
mxConnectorConstructs a new connector shape.
updateBoundingBoxUpdates the <boundingBox> for this shape using <createBoundingBox> and augmentBoundingBox and stores the result in <boundingBox>.
paintEdgeShapePaints the line shape.
createMarkerPrepares the marker by adding offsets in pts and returning a function to paint the marker.
augmentBoundingBoxAugments the bounding box with the strokewidth and shadow offsets.
mxSwimlaneExtends mxShape to implement a swimlane shape.
Functions
mxSwimlaneConstructs a new swimlane shape.
Variables
imageSizeDefault imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style.
Functions
isRoundableAdds roundable support.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
getArcSizeReturns the arcsize for the swimlane.
paintVertexShapePaints the swimlane vertex shape.
paintVertexShapePaints the swimlane vertex shape.
paintSwimlanePaints the swimlane vertex shape.
paintRoundedSwimlanePaints the swimlane vertex shape.
paintDividerPaints the divider between swimlane title and content area.
paintSeparatorPaints the vertical or horizontal separator line between swimlanes.
getImageBoundsPaints the swimlane vertex shape.
mxGraphLayoutBase class for all layout algorithms in mxGraph.
Functions
mxGraphLayoutConstructs a new layout using the given layouts.
Variables
graphReference to the enclosing mxGraph.
useBoundingBoxBoolean indicating if the bounding box of the label should be used if its available.
parentThe parent cell of the layout, if any
Functions
moveCellNotified when a cell is being moved in a parent that has automatic layout to update the cell state (eg.
executeExecutes the layout algorithm for the children of the given parent.
getGraphReturns the graph that this layout operates on.
getConstraintReturns the constraint for the given key and cell.
traverseTraverses the (directed) graph invoking the given function for each visited vertex and edge.
isAncestorReturns true if the given parent is an ancestor of the given child.
isVertexMovableReturns a boolean indicating if the given mxCell is movable or bendable by the algorithm.
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored by the algorithm.
isEdgeIgnoredReturns a boolean indicating if the given mxCell should be ignored by the algorithm.
setEdgeStyleEnabledDisables or enables the edge style of the given edge.
setOrthogonalEdgeDisables or enables orthogonal end segments of the given edge.
getParentOffsetDetermines the offset of the given parent to the parent of the layout
setEdgePointsReplaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.
setVertexLocationSets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true.
getVertexBoundsReturns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.
arrangeGroupsShortcut to mxGraph.updateGroupBounds with moveGroup set to true.
WeightedCellSorterA utility class used to track cells whilst sorting occurs on the weighted sum of their connected edges.
Functions
WeightedCellSorterConstructs a new weighted cell sorted for the given cell and weight.
Variables
weightedValueThe weighted value of the cell stored.
nudgeWhether or not to flip equal weight values.
visitedWhether or not this cell has been visited in the current assignment.
rankIndexThe index this cell is in the model rank.
cellThe cell whose median value is being calculated.
Functions
compareCompares two WeightedCellSorters.
mxStackLayoutExtends mxGraphLayout to create a horizontal or vertical stack of the child vertices.
Functions
mxStackLayoutConstructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontalSpecifies the orientation of the layout.
spacingSpecifies the spacing between the cells.
x0Specifies the horizontal origin of the layout.
y0Specifies the vertical origin of the layout.
borderBorder to be added if fill is true.
marginTopTop margin for the child area.
marginLeftTop margin for the child area.
marginRightTop margin for the child area.
marginBottomTop margin for the child area.
keepFirstLocationBoolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.
fillBoolean indicating if dimension should be changed to fill out the parent cell.
resizeParentIf the parent should be resized to match the width/height of the stack.
resizeParentMaxUse maximum of existing value and new value for resize of parent.
resizeLastIf the last element should be resized to fill out the parent.
wrapValue at which a new column or row should be created.
borderCollapseIf the strokeWidth should be ignored.
allowGapsIf gaps should be allowed in the stack.
gridSizeGrid size for alignment of position and size.
Functions
isHorizontalReturns horizontal.
moveCellImplements mxGraphLayout.moveCell.
getParentSizeReturns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.
getLayoutCellsReturns the cells to be layouted.
snapSnaps the given value to the grid size.
executeImplements mxGraphLayout.execute.
executeImplements mxGraphLayout.execute.
executeImplements mxGraphLayout.execute.
mxPartitionLayoutExtends mxGraphLayout for partitioning the parent cell vertically or horizontally by filling the complete area with the child cells.
Functions
mxPartitionLayoutConstructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontalBoolean indicating the direction in which the space is partitioned.
spacingInteger that specifies the absolute spacing in pixels between the children.
borderInteger that specifies the absolute inset in pixels for the parent that contains the children.
resizeVerticesBoolean that specifies if vertices should be resized.
Functions
isHorizontalReturns horizontal.
moveCellImplements mxGraphLayout.moveCell.
executeImplements mxGraphLayout.execute.
mxCompactTreeLayoutExtends mxGraphLayout to implement a compact tree (Moen) algorithm.
Functions
mxCompactTreeLayoutConstructs a new compact tree layout for the specified graph and orientation.
Variables
horizontalSpecifies the orientation of the layout.
invertSpecifies if edge directions should be inverted.
resizeParentIf the parents should be resized to match the width/height of the children.
maintainParentLocationSpecifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
groupPaddingPadding added to resized parents.
groupPaddingTopTop padding added to resized parents.
groupPaddingRightRight padding added to resized parents.
groupPaddingBottomBottom padding added to resized parents.
groupPaddingLeftLeft padding added to resized parents.
parentsChangedA set of the parents that need updating based on children process as part of the layout.
moveTreeSpecifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
visitedSpecifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
levelDistanceHolds the levelDistance.
nodeDistanceHolds the nodeDistance.
resetEdgesSpecifies if all edge points of traversed edges should be removed.
prefHozEdgeSepThe preferred horizontal distance between edges exiting a vertex.
prefVertEdgeOffThe preferred vertical offset between edges exiting a vertex.
minEdgeJettyThe minimum distance for an edge jetty from a vertex.
channelBufferThe size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.
edgeRoutingWhether or not to apply the internal tree edge routing.
sortEdgesSpecifies if edges should be sorted according to the order of their opposite terminal cell in the model.
alignRanksWhether or not the tops of cells in each rank should be aligned across the rank
maxRankHeightAn array of the maximum height of cells (relative to the layout direction) per rank
rootThe cell to use as the root of the tree
nodeThe internal node representation of the root cell.
Functions
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored as a vertex.
isHorizontalReturns horizontal.
executeImplements mxGraphLayout.execute.
moveNodeMoves the specified node and all of its children by the given amount.
sortOutgoingEdgesCalled if sortEdges is true to sort the array of outgoing edges in place.
findRankHeightsStores the maximum height (relative to the layout direction) of cells in each rank
setCellHeightsSet the cells heights (relative to the layout direction) when the tops of each rank are to be aligned
dfsDoes a depth first search starting at the specified cell.
layoutStarts the actual compact tree layout algorithm at the given node.
horizontalLayout
verticalLayout
attachParent
layoutLeaf
join
merge
offset
bridge
createNode
apply
createLine
adjustParentsAdjust parent cells whose child geometries have changed.
localEdgeProcessingMoves the specified node and all of its children by the given amount.
localEdgeProcessingSeparates the x position of edges as they connect to vertices
mxRadialTreeLayoutExtends mxGraphLayout to implement a radial tree algorithm.
Functions
mxRadialTreeLayoutConstructs a new radial tree layout for the specified graph
Variables
angleOffsetThe initial offset to compute the angle position.
rootxThe X co-ordinate of the root cell
rootyThe Y co-ordinate of the root cell
levelDistanceHolds the levelDistance.
nodeDistanceHolds the nodeDistance.
autoRadiusSpecifies if the radios should be computed automatically
sortEdgesSpecifies if edges should be sorted according to the order of their opposite terminal cell in the model.
rowMinXArray of leftmost x coordinate of each row
rowMaxXArray of rightmost x coordinate of each row
rowMinCenXArray of x coordinate of leftmost vertex of each row
rowMaxCenXArray of x coordinate of rightmost vertex of each row
rowRadiArray of y deltas of each row behind root vertex, also the radius in the tree
rowArray of vertices on each row
Functions
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored as a vertex.
executeImplements mxGraphLayout.execute.
calcRowDimsRecursive function to calculate the dimensions of each row
mxFastOrganicLayoutExtends mxGraphLayout to implement a fast organic layout algorithm.
Functions
mxCompactTreeLayoutConstructs a new fast organic layout for the specified graph.
Variables
useInputOriginSpecifies if the top left corner of the input cells should be the origin of the layout result.
resetEdgesSpecifies if all edge points of traversed edges should be removed.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
forceConstantThe force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.
forceConstantSquaredCache of <forceConstant>^2 for performance.
minDistanceLimitMinimal distance limit.
minDistanceLimitMinimal distance limit.
minDistanceLimitSquaredCached version of minDistanceLimit squared.
initialTempStart value of temperature.
temperatureTemperature to limit displacement at later stages of layout.
maxIterationsTotal number of iterations to run the layout though.
iterationCurrent iteration count.
vertexArrayAn array of all vertices to be laid out.
dispXAn array of locally stored X co-ordinate displacements for the vertices.
dispYAn array of locally stored Y co-ordinate displacements for the vertices.
cellLocationAn array of locally stored co-ordinate positions for the vertices.
radiusThe approximate radius of each cell, nodes only.
radiusSquaredThe approximate radius squared of each cell, nodes only.
isMoveableArray of booleans representing the movable states of the vertices.
neighboursLocal copy of cell neighbours.
indicesHashtable from cells to local indices.
allowedToRunBoolean flag that specifies if the layout is allowed to run.
Functions
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored as a vertex.
executeImplements mxGraphLayout.execute.
calcPositionsTakes the displacements calculated for each cell and applies them to the local cache of cell positions.
calcAttractionCalculates the attractive forces between all laid out nodes linked by edges
calcRepulsionCalculates the repulsive forces between all laid out nodes
reduceTemperatureReduces the temperature of the layout from an initial setting in a linear fashion to zero.
mxCircleLayoutExtends mxGraphLayout to implement a circluar layout for a given radius.
Functions
mxCircleLayoutConstructs a new circular layout for the specified radius.
Variables
radiusInteger specifying the size of the radius.
moveCircleBoolean specifying if the circle should be moved to the top, left corner specified by x0 and y0.
x0Integer specifying the left coordinate of the circle.
y0Integer specifying the top coordinate of the circle.
resetEdgesSpecifies if all edge points of traversed edges should be removed.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
Functions
executeImplements mxGraphLayout.execute.
getRadiusReturns the radius to be used for the given vertex count.
circleExecutes the circular layout for the specified array of vertices and the given radius.
mxParallelEdgeLayoutExtends mxGraphLayout for arranging parallel edges.
Functions
mxCompactTreeLayoutConstructs a new fast organic layout for the specified graph.
Variables
spacingDefines the spacing between the parallels.
Functions
executeImplements mxGraphLayout.execute.
findParallelsFinds the parallel edges in the given parent.
getEdgeIdReturns a unique ID for the given edge.
layoutLays out the parallel edges in the given array.
routeRoutes the given edge via the given point.
mxCompositeLayoutAllows to compose multiple layouts into a single layout.
Functions
mxCompositeLayoutConstructs a new layout using the given layouts.
Variables
layoutsHolds the array of mxGraphLayouts that this layout contains.
layoutsReference to the mxGraphLayouts that handles moves.
Functions
moveCellImplements mxGraphLayout.moveCell by calling move on <master> or the first layout in layouts.
executeImplements mxGraphLayout.execute by executing all layouts in a single transaction.
mxEdgeLabelLayoutExtends mxGraphLayout to implement an edge label layout.
Functions
mxEdgeLabelLayoutConstructs a new edge label layout.
executeImplements mxGraphLayout.execute.
placeLabelsPlaces the labels of the given edges.
avoidPlaces the labels of the given edges.
mxGraphAbstractHierarchyCellAn abstraction of an internal hierarchy node or edge
Functions
mxGraphAbstractHierarchyCellConstructs a new hierarchical layout algorithm.
Variables
maxRankThe maximum rank this cell occupies.
minRankThe minimum rank this cell occupies.
xThe x position of this cell for each layer it occupies
yThe y position of this cell for each layer it occupies
widthThe width of this cell
heightThe height of this cell
nextLayerConnectedCellsA cached version of the cells this cell connects to on the next layer up
previousLayerConnectedCellsA cached version of the cells this cell connects to on the next layer down
tempTemporary variable for general use.
Functions
getNextLayerConnectedCellsReturns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCellsReturns the cells this cell connects to on the next layer down
isEdgeReturns whether or not this cell is an edge
isVertexReturns whether or not this cell is a node
getGeneralPurposeVariableGets the value of temp for the specified layer
setGeneralPurposeVariableSet the value of temp for the specified layer
setXSet the value of x for the specified layer
getXGets the value of x on the specified layer
setYSet the value of y for the specified layer
mxGraphHierarchyNodeAn abstraction of a hierarchical edge for the hierarchy layout
Functions
mxGraphHierarchyNodeConstructs an internal node to represent the specified real graph cell
Variables
cellThe graph cell this object represents.
idThe object identity of the wrapped cell
connectsAsTargetCollection of hierarchy edges that have this node as a target
connectsAsSourceCollection of hierarchy edges that have this node as a source
hashCodeAssigns a unique hashcode for each node.
Functions
getRankValueReturns the integer value of the layer that this node resides in
getNextLayerConnectedCellsReturns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCellsReturns the cells this cell connects to on the next layer down
isVertexReturns true.
getGeneralPurposeVariableGets the value of temp for the specified layer
setGeneralPurposeVariableSet the value of temp for the specified layer
isAncestor
getCoreCellGets the core vertex associated with this wrapper
mxGraphHierarchyEdgeAn abstraction of a hierarchical edge for the hierarchy layout
Functions
mxGraphHierarchyEdgeConstructs a hierarchy edge
Variables
edgesThe graph edge(s) this object represents.
idsThe object identities of the wrapped cells
sourceThe node this edge is sourced at
targetThe node this edge targets
isReversedWhether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout
Functions
invertInverts the direction of this internal edge(s)
getNextLayerConnectedCellsReturns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCellsReturns the cells this cell connects to on the next layer down
isEdgeReturns true.
getGeneralPurposeVariableGets the value of temp for the specified layer
setGeneralPurposeVariableSet the value of temp for the specified layer
getCoreCellGets the first core edge associated with this wrapper
mxGraphHierarchyModelInternal model of a hierarchical graph.
Functions
mxGraphHierarchyModelCreates an internal ordered graph model using the vertices passed in.
Variables
maxRankStores the largest rank number allocated
vertexMapperMap from graph vertices to internal model nodes.
edgeMapperMap from graph edges to internal model edges
ranksMapping from rank number to actual rank
rootsStore of roots of this hierarchy model, these are real graph cells, not internal cells
parentThe parent cell whose children are being laid out
dfsCountCount of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANKHigh value to start source layering scan rank value from.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
Functions
createInternalCellsCreates all edges in the internal model
initialRankBasic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
fixRanksFixes the layer assignments to the values stored in the nodes.
visitA depth first search through the internal heirarchy model.
dfsPerforms a depth first search on the internal hierarchy model
extendedDfsPerforms a depth first search on the internal hierarchy model.
mxSwimlaneModelInternal model of a hierarchical graph.
Functions
mxSwimlaneModelCreates an internal ordered graph model using the vertices passed in.
Variables
maxRankStores the largest rank number allocated
vertexMapperMap from graph vertices to internal model nodes.
edgeMapperMap from graph edges to internal model edges
ranksMapping from rank number to actual rank
rootsStore of roots of this hierarchy model, these are real graph cells, not internal cells
parentThe parent cell whose children are being laid out
dfsCountCount of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANKHigh value to start source layering scan rank value from.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
ranksPerGroupAn array of the number of ranks within each swimlane
Functions
createInternalCellsCreates all edges in the internal model
initialRankBasic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
maxChainDfsPerforms a depth first search on the internal hierarchy model.
fixRanksFixes the layer assignments to the values stored in the nodes.
visitA depth first search through the internal heirarchy model.
dfsPerforms a depth first search on the internal hierarchy model
extendedDfsPerforms a depth first search on the internal hierarchy model.
mxHierarchicalLayoutStageThe specific layout interface for hierarchical layouts.
Functions
mxHierarchicalLayoutStageConstructs a new hierarchical layout stage.
executeTakes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
mxMedianHybridCrossingReductionSets the horizontal locations of node and edge dummy nodes on each layer.
Functions
mxMedianHybridCrossingReductionCreates a coordinate assignment.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
maxIterationsThe maximum number of iterations to perform whilst reducing edge crossings.
nestedBestRanksStores each rank as a collection of cells in the best order found for each layer so far
currentBestCrossingsThe total number of crossings found in the best configuration so far
iterationsWithoutImprovementThe total number of crossings found in the best configuration so far
maxNoImprovementIterationsThe total number of crossings found in the best configuration so far
Functions
executePerforms a vertex ordering within ranks as described by Gansner et al 1993
calculateCrossingsCalculates the total number of edge crossing in the current graph.
calculateRankCrossingCalculates the number of edges crossings between the specified rank and the rank below it.
transposeTakes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing
weightedMedianSweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks
medianRankAttempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks
medianValueCalculates the median rank order positioning for the specified cell using the connected cells on the specified rank.
MedianCellSorterA utility class used to track cells whilst sorting occurs on the median values.
Functions
MedianCellSorterConstructs a new median cell sorter.
Variables
medianValueThe weighted value of the cell stored.
cellThe cell whose median value is being calculated
Functions
compareCompares two MedianCellSorters.
mxMinimumCycleRemoverAn implementation of the first stage of the Sugiyama layout.
Functions
mxMinimumCycleRemoverCreates a cycle remover for the given internal model.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
Functions
executeTakes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
mxCoordinateAssignmentSets the horizontal locations of node and edge dummy nodes on each layer.
Functions
mxCoordinateAssignmentCreates a coordinate assignment.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
intraCellSpacingThe minimum buffer between cells on the same rank.
interRankCellSpacingThe minimum distance between cells on adjacent ranks.
parallelEdgeSpacingThe distance between each parallel edge on each ranks for long edges.
maxIterationsThe number of heuristic iterations to run.
prefHozEdgeSepThe preferred horizontal distance between edges exiting a vertex
prefVertEdgeOffThe preferred vertical offset between edges exiting a vertex
minEdgeJettyThe minimum distance for an edge jetty from a vertex
channelBufferThe size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed
jettyPositionsMap of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices.
orientationThe position of the root ( start ) node(s) relative to the rest of the laid out graph.
initialXThe minimum x position node placement starts at
limitXThe maximum x value this positioning lays up to
currentXDeltaThe sum of x-displacements for the current iteration
widestRankThe rank that has the widest x position
rankTopYInternal cache of top-most values of Y for each rank
rankBottomYInternal cache of bottom-most value of Y for each rank
widestRankValueThe X-coordinate of the edge of the widest rank
rankWidthsThe width of all the ranks
rankYThe Y-coordinate of all the ranks
fineTuningWhether or not to perform local optimisations and iterate multiple times through the algorithm.
nextLayerConnectedCacheA store of connections to the layer above for speed
previousLayerConnectedCacheA store of connections to the layer below for speed
groupPaddingPadding added to resized parents
Functions
executeA basic horizontal coordinate assignment algorithm
minNodePerforms one median positioning sweep in both directions
medianPosPerforms one median positioning sweep in one direction
rankMedianPositionPerforms median minimisation over one rank.
calculatedWeightedValueCalculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer
medianXValueCalculates the median position of the connected cell on the specified rank
initialCoordsSets up the layout in an initial positioning.
rankCoordinatesSets up the layout in an initial positioning.
calculateWidestRankCalculates the width rank in the hierarchy.
minPathStraightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.
repositionValidDetermines whether or not a node may be moved to the specified x position on the specified rank
setCellLocationsSets the cell locations in the facade to those stored after this layout processing step has completed.
localEdgeProcessingSeparates the x position of edges as they connect to vertices
setEdgePositionFixes the control points
setVertexLocationFixes the position of the specified vertex.
processReversedEdgeHook to add additional processing
mxSwimlaneOrderingAn implementation of the first stage of the Sugiyama layout.
Functions
mxSwimlaneOrderingCreates a cycle remover for the given internal model.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
Functions
executeTakes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
mxHierarchicalLayoutA hierarchical layout algorithm.
Functions
mxHierarchicalLayoutConstructs a new hierarchical layout algorithm.
Variables
rootsHolds the array of mxCell that this layout contains.
resizeParentSpecifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocationSpecifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParentSpecifies if the parent should be moved if resizeParent is enabled.
parentBorderThe border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacingThe spacing buffer added between cells on the same layer.
interRankCellSpacingThe spacing buffer added between cell on adjacent layers.
interHierarchySpacingThe spacing buffer between unconnected hierarchies.
parallelEdgeSpacingThe distance between each parallel edge on each ranks for long edges
orientationThe position of the root node(s) relative to the laid out graph in.
fineTuningWhether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestorsWhether or not to drill into child cells and layout in reverse group order.
modelThe internal mxGraphHierarchyModel formed of the layout.
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgeStyleThe style to apply between cell layers to edge segments
Functions
getModelReturns the internal mxGraphHierarchyModel for this layout algorithm.
executeExecutes the layout for the children of the specified parent.
findRootsReturns all visible children in the given parent which do not have incoming edges.
getEdgesReturns the connected edges for the given cell.
getVisibleTerminalHelper function to return visible terminal for edge allowing for ports
runThe API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendantsCreates an array of descendant cells
isPortReturns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetweenReturns the edges between the given source and target.
cycleStageExecutes the cycle stage using mxMinimumCycleRemover.
layeringStageImplements first stage of a Sugiyama layout.
crossingStageExecutes the crossing stage using mxMedianHybridCrossingReduction.
placementStageExecutes the placement stage using mxCoordinateAssignment.
mxSwimlaneLayoutA hierarchical layout algorithm.
Functions
mxSwimlaneLayoutConstructs a new hierarchical layout algorithm.
Variables
rootsHolds the array of mxCell that this layout contains.
swimlanesHolds the array of mxCell of the ordered swimlanes to lay out
dummyVerticesHolds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes
dummyVertexWidthThe cell width of any dummy vertices inserted
resizeParentSpecifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocationSpecifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParentSpecifies if the parent should be moved if resizeParent is enabled.
parentBorderThe border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacingThe spacing buffer added between cells on the same layer.
interRankCellSpacingThe spacing buffer added between cell on adjacent layers.
interHierarchySpacingThe spacing buffer between unconnected hierarchies.
parallelEdgeSpacingThe distance between each parallel edge on each ranks for long edges
orientationThe position of the root node(s) relative to the laid out graph in.
fineTuningWhether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestorsWhether or not to drill into child cells and layout in reverse group order.
modelThe internal mxSwimlaneModel formed of the layout.
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgeStyleThe style to apply between cell layers to edge segments
Functions
getModelReturns the internal mxSwimlaneModel for this layout algorithm.
executeExecutes the layout for the children of the specified parent.
updateGroupBoundsUpdates the bounds of the given array of groups so that it includes all child vertices.
findRootsReturns all visible children in the given parent which do not have incoming edges.
getEdgesReturns the connected edges for the given cell.
getVisibleTerminalHelper function to return visible terminal for edge allowing for ports
runThe API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendantsCreates an array of descendant cells
isPortReturns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetweenReturns the edges between the given source and target.
cycleStageExecutes the cycle stage using mxMinimumCycleRemover.
layeringStageImplements first stage of a Sugiyama layout.
crossingStageExecutes the crossing stage using mxMedianHybridCrossingReduction.
placementStageExecutes the placement stage using mxCoordinateAssignment.
mxGraphModelExtends mxEventSource to implement a graph model.
Events
mxEvent.CHANGEFires when an undoable edit is dispatched.
mxEvent.NOTIFYSame as mxEvent.CHANGE, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model.
mxEvent.EXECUTEFires between begin- and endUpdate and after an atomic change was executed in the model.
mxEvent.EXECUTEDFires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.BEGIN_UPDATEFires after the updateLevel was incremented in beginUpdate.
mxEvent.START_EDITFires after the updateLevel was changed from 0 to 1.
mxEvent.END_UPDATEFires after the updateLevel was decreased in endUpdate but before any notification or change dispatching.
mxEvent.END_EDITFires after the updateLevel was changed from 1 to 0.
mxEvent.BEFORE_UNDOFires before the change is dispatched after the update level has reached 0 in endUpdate.
mxEvent.UNDOFires after the change was dispatched in endUpdate.
Functions
mxGraphModelConstructs a new graph model.
Variables
rootHolds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
cellsMaps from Ids to cells.
maintainEdgeParentSpecifies if edges should automatically be moved into the nearest common ancestor of their terminals.
ignoreRelativeEdgeParentSpecifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.
createIdsSpecifies if the model should automatically create Ids for new cells.
prefixDefines the prefix of new Ids.
postfixDefines the postfix of new Ids.
nextIdSpecifies the next Id to be created.
currentEditHolds the changes for the current transaction.
updateLevelCounter for the depth of nested transactions.
endingUpdateTrue if the program flow is currently inside endUpdate.
Functions
clearSets a new root using createRoot.
isCreateIdsReturns createIds.
setCreateIdsSets createIds.
createRootCreates a new root cell with a default layer (child 0).
getCellReturns the mxCell for the specified Id or null if no cell can be found for the given Id.
filterCellsReturns the cells from the given array where the given filter function returns true.
getDescendantsReturns all descendants of the given cell and the cell itself in an array.
filterDescendantsVisits all cells recursively and applies the specified filter function to each cell.
getRootReturns the root of the model or the topmost parent of the given cell.
setRootSets the root of the model using mxRootChange and adds the change to the current transaction.
rootChangedInner callback to change the root of the model and update the internal datastructures, such as cells and nextId.
isRootReturns true if the given cell is the root of the model and a non-null value.
isLayerReturns true if isRoot returns true for the parent of the given cell.
isAncestorReturns true if the given parent is an ancestor of the given child.
containsReturns true if the model contains the given mxCell.
getParentReturns the parent of the given cell.
addAdds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.
cellAddedInner callback to update cells when a cell has been added.
createIdHook method to create an Id for the specified cell.
updateEdgeParentsUpdates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
updateEdgeParentInner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.
getOriginReturns the absolute, accumulated origin for the children inside the given parent as an mxPoint.
getNearestCommonAncestorReturns the nearest common ancestor for the specified cells.
removeRemoves the specified cell from the model using mxChildChange and adds the change to the current transaction.
cellRemovedInner callback to update cells when a cell has been removed.
parentForCellChangedInner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.
getChildCountReturns the number of children in the given cell.
getChildAtReturns the child of the given mxCell at the given index.
getChildrenReturns all children of the given mxCell as an array of mxCells.
getChildVerticesReturns the child vertices of the given parent.
getChildEdgesReturns the child edges of the given parent.
getChildCellsReturns the children of the given cell that are vertices and/or edges depending on the arguments.
getTerminalReturns the source or target mxCell of the given edge depending on the value of the boolean parameter.
setTerminalSets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.
setTerminalsSets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.
terminalForCellChangedInner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.
getEdgeCountReturns the number of distinct edges connected to the given cell.
getEdgeAtReturns the edge of cell at the given index.
getDirectedEdgeCountReturns the number of incoming or outgoing edges, ignoring the given edge.
getConnectionsReturns all edges of the given cell without loops.
getIncomingEdgesReturns the incoming edges of the given cell without loops.
getOutgoingEdgesReturns the outgoing edges of the given cell without loops.
getEdgesReturns all distinct edges connected to this cell as a new array of mxCells.
getEdgesBetweenReturns all edges between the given source and target pair.
getOppositesReturns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.
getTopmostCellsReturns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.
isVertexReturns true if the given cell is a vertex.
isEdgeReturns true if the given cell is an edge.
isConnectableReturns true if the given mxCell is connectable.
getValueReturns the user object of the given mxCell using mxCell.getValue.
setValueSets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
valueForCellChangedInner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.
getGeometryReturns the mxGeometry of the given mxCell.
setGeometrySets the mxGeometry of the given mxCell.
geometryForCellChangedInner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.
getStyleReturns the style of the given mxCell.
setStyleSets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
styleForCellChangedInner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.
isCollapsedReturns true if the given mxCell is collapsed.
setCollapsedSets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
collapsedStateForCellChangedInner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.
isVisibleReturns true if the given mxCell is visible.
setVisibleSets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
visibleStateForCellChangedInner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.
executeExecutes the given edit and fires events if required.
beginUpdateIncrements the updateLevel by one.
endUpdateDecrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0.
createUndoableEditCreates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.
mergeChildrenMerges the children of the given cell into the given target cell inside this model.
mergeChildrenClones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.
getParentsReturns an array that represents the set (no duplicates) of all parents for the given array of cells.
cloneCellReturns a deep clone of the given mxCell (including the children) which is created using cloneCells.
cloneCellsReturns an array of clones for the given array of mxCells.
cloneCellImplInner helper method for cloning cells recursively.
cellClonedHook for cloning the cell.
restoreCloneInner helper method for restoring the connections in a network of cloned cells.
mxRootChangeAction to change the root in a model.
Functions
mxRootChangeConstructs a change of the root in the specified model.
executeCarries out a change of the root using mxGraphModel.rootChanged.
mxChildChangeAction to add or remove a child in a model.
Functions
mxChildChangeConstructs a change of a child in the specified model.
executeChanges the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
disconnectDisconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.
mxTerminalChangeAction to change a terminal in a model.
Functions
mxTerminalChangeConstructs a change of a terminal in the specified model.
executeChanges the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.
mxValueChangeAction to change a user object in a model.
Functions
mxValueChangeConstructs a change of a user object in the specified model.
executeChanges the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.
mxStyleChangeAction to change a cell’s style in a model.
Functions
mxStyleChangeConstructs a change of a style in the specified model.
executeChanges the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.
mxGeometryChangeAction to change a cell’s geometry in a model.
Functions
mxGeometryChangeConstructs a change of a geometry in the specified model.
executeChanges the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.
mxCollapseChangeAction to change a cell’s collapsed state in a model.
Functions
mxCollapseChangeConstructs a change of a collapsed state in the specified model.
executeChanges the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.
mxVisibleChangeAction to change a cell’s visible state in a model.
Functions
mxVisibleChangeConstructs a change of a visible state in the specified model.
executeChanges the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.
mxCellAttributeChangeAction to change the attribute of a cell’s user object.
Functions
mxCellAttributeChangeConstructs a change of a attribute of the DOM node stored as the value of the given mxCell.
executeChanges the attribute of the cell’s user object by using mxCell.setAttribute.
mxCellCells are the elements of the graph model.
Functions
onInitCalled from within the constructor.
mxCellConstructs a new cell to be used in a graph model.
Variables
idHolds the Id.
valueHolds the user object.
geometryHolds the mxGeometry.
styleHolds the style as a string of the form [(stylename|key=value);].
vertexSpecifies whether the cell is a vertex.
edgeSpecifies whether the cell is an edge.
connectableSpecifies whether the cell is connectable.
visibleSpecifies whether the cell is visible.
collapsedSpecifies whether the cell is collapsed.
parentReference to the parent cell.
sourceReference to the source terminal.
targetReference to the target terminal.
childrenHolds the child cells.
edgesHolds the edges.
mxTransientList of members that should not be cloned inside clone.
Functions
getIdReturns the Id of the cell as a string.
setIdSets the Id of the cell to the given string.
getValueReturns the user object of the cell.
setValueSets the user object of the cell.
valueChangedChanges the user object after an in-place edit and returns the previous value.
getGeometryReturns the mxGeometry that describes the geometry.
setGeometrySets the mxGeometry to be used as the geometry.
getStyleReturns a string that describes the style.
setStyleSets the string to be used as the style.
isVertexReturns true if the cell is a vertex.
setVertexSpecifies if the cell is a vertex.
isEdgeReturns true if the cell is an edge.
setEdgeSpecifies if the cell is an edge.
isConnectableReturns true if the cell is connectable.
setConnectableSets the connectable state.
isVisibleReturns true if the cell is visibile.
setVisibleSpecifies if the cell is visible.
isCollapsedReturns true if the cell is collapsed.
setCollapsedSets the collapsed state.
getParentReturns the cell’s parent.
setParentSets the parent cell.
getTerminalReturns the source or target terminal.
setTerminalSets the source or target terminal and returns the new terminal.
getChildCountReturns the number of child cells.
getIndexReturns the index of the specified child in the child array.
getChildAtReturns the child at the specified index.
insertInserts the specified child into the child array at the specified index and updates the parent reference of the child.
removeRemoves the child at the specified index from the child array and returns the child that was removed.
removeFromParentRemoves the cell from its parent.
getEdgeCountReturns the number of edges in the edge array.
getEdgeIndexReturns the index of the specified edge in edges.
getEdgeAtReturns the edge at the specified index in edges.
insertEdgeInserts the specified edge into the edge array and returns the edge.
removeEdgeRemoves the specified edge from the edge array and returns the edge.
removeFromTerminalRemoves the edge from its source or target terminal.
hasAttributeReturns true if the user object is an XML node that contains the given attribute.
getAttributeReturns the specified attribute from the user object if it is an XML node.
setAttributeSets the specified attribute on the user object if it is an XML node.
cloneReturns a clone of the cell.
cloneValueReturns a clone of the cell’s user object.
mxGeometryExtends mxRectangle to represent the geometry of a cell.
Functions
mxGeometryConstructs a new object to describe the size and location of a vertex or the control points of an edge.
Variables
TRANSLATE_CONTROL_POINTSGlobal switch to translate the points in translate.
alternateBoundsStores alternate values for x, y, width and height in a rectangle.
sourcePointDefines the source mxPoint of the edge.
targetPointDefines the target mxPoint of the edge.
pointsArray of mxPoints which specifies the control points along the edge.
offsetFor edges, this holds the offset (in pixels) from the position defined by <x> and <y> on the edge.
relativeSpecifies if the coordinates in the geometry are to be interpreted as relative coordinates.
Functions
swapSwaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle.
getTerminalPointReturns the mxPoint representing the source or target point of this edge.
setTerminalPointSets the sourcePoint or targetPoint to the given mxPoint and returns the new point.
rotateRotates the geometry by the given angle around the given center.
translateTranslates the geometry by the specified amount.
scaleScales the geometry by the given amount.
equalsReturns true if the given object equals this geometry.
mxCellPathImplements a mechanism for temporary cell Ids.
Variables
PATH_SEPARATORDefines the separator between the path components.
Functions
createCreates the cell path for the given cell.
getParentPathReturns the path for the parent of the cell represented by the given path.
resolveReturns the cell for the specified cell path using the given root as the root of the path.
compareCompares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.
mxPerimeterProvides various perimeter functions to be used in a style as the value of mxConstants.STYLE_PERIMETER.
Functions
RectanglePerimeterDescribes a rectangular perimeter for the given bounds.
EllipsePerimeterDescribes an elliptic perimeter.
RhombusPerimeterDescribes a rhombus (aka diamond) perimeter.
TrianglePerimeterDescribes a triangle perimeter.
HexagonPerimeterDescribes a hexagon perimeter.
mxPrintPreviewImplements printing of a diagram across multiple pages.
Functions
mxPrintPreviewConstructs a new print preview for the given parameters.
Variables
graphReference to the mxGraph that should be previewed.
pageFormatHolds the mxRectangle that defines the page format.
scaleHolds the scale of the print preview.
borderThe border inset around each side of every page in the preview.
marginTopThe margin at the top of the page (number).
marginBottomThe margin at the bottom of the page (number).
x0Holds the horizontal offset of the output.
y0Holds the vertical offset of the output.
autoOriginSpecifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
printOverlaysSpecifies if overlays should be printed.
printControlsSpecifies if controls (such as folding icons) should be printed.
printBackgroundImageSpecifies if the background image should be printed.
backgroundColorHolds the color value for the page background color.
borderColorHolds the color value for the page border.
titleHolds the title of the preview window.
pageSelectorBoolean that specifies if the page selector should be displayed.
wndReference to the preview window.
targetWindowAssign any window here to redirect the rendering in open.
pageCountHolds the actual number of pages in the preview.
clippingSpecifies is clipping should be used to avoid creating too many cell states in large diagrams.
Functions
getWindowReturns wnd.
getDocTypeReturns the string that should go before the HTML tag in the print preview page.
appendGraphAdds the given graph to the existing print preview.
openShows the print preview window.
addPageBreakAdds a page break to the given document.
closeDocumentWrites the closing tags for body and page after calling writePostfix.
writeHeadWrites the HEAD section into the given document, without the opening and closing HEAD tags.
writePostfixCalled before closing the body of the page.
createPageSelectorCreates the page selector table.
renderPageCreates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
getRootReturns the root cell for painting the graph.
addGraphFragmentAdds a graph fragment to the given div.
getLinkForCellStateReturns the link for the given cell state.
insertBackgroundImageInserts the background image into the given div.
getCoverPagesReturns the pages to be added before the print output.
getAppendicesReturns the pages to be added after the print output.
printOpens the print preview and shows the print dialog.
closeCloses the print preview window.
mxStylesheetDefines the appearance of the cells in a graph.
Functions
mxStylesheetConstructs a new stylesheet and assigns default styles.
stylesMaps from names to cell styles.
createDefaultVertexStyleCreates and returns the default vertex style.
createDefaultEdgeStyleCreates and returns the default edge style.
putDefaultVertexStyleSets the default style for vertices using defaultVertex as the stylename.
putDefaultEdgeStyleSets the default style for edges using defaultEdge as the stylename.
getDefaultVertexStyleReturns the default style for vertices.
getDefaultEdgeStyleSets the default style for edges.
putCellStyleStores the given map of key, value pairs under the given name in styles.
getCellStyleReturns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.
mxCellStateRepresents the current state of a cell in a given mxGraphView.
Functions
mxCellStateConstructs a new object that represents the current state of the given cell in the specified view.
Variables
viewReference to the enclosing mxGraphView.
cellReference to the mxCell that is represented by this state.
styleContains an array of key, value pairs that represent the style of the cell.
invalidStyleSpecifies if the style is invalid.
invalidSpecifies if the state is invalid.
originmxPoint that holds the origin for all child cells.
absolutePointsHolds an array of mxPoints that represent the absolute points of an edge.
absoluteOffsetmxPoint that holds the absolute offset.
visibleSourceStateCaches the visible source terminal state.
visibleTargetStateCaches the visible target terminal state.
terminalDistanceCaches the distance between the end points for an edge.
lengthCaches the length of an edge.
segmentsArray of numbers that represent the cached length of each segment of the edge.
shapeHolds the mxShape that represents the cell graphically.
textHolds the mxText that represents the label of the cell.
unscaledWidthHolds the unscaled width of the state.
Functions
getPerimeterBoundsReturns the mxRectangle that should be used as the perimeter of the cell.
setAbsoluteTerminalPointSets the first or last point in absolutePoints depending on isSource.
setCursorSets the given cursor on the shape and text shape.
getVisibleTerminalReturns the visible source or target terminal cell.
getVisibleTerminalStateReturns the visible source or target terminal state.
setVisibleTerminalStateSets the visible source or target terminal state.
getCellBoundsReturns the unscaled, untranslated bounds.
getPaintBoundsReturns the unscaled, untranslated paint bounds.
updateCachedBoundsUpdates the cellBounds and paintBounds.
setStateCopies all fields from the given state to this state.
cloneReturns a clone of this mxPoint.
destroyDestroys the state and all associated resources.
mxGraphSelectionModelImplements the selection model for a graph.
Events
mxEvent.UNDOFires after the selection was changed in changeSelection.
mxEvent.CHANGEFires after the selection changes by executing an mxSelectionChange.
Functions
mxGraphSelectionModelConstructs a new graph selection model for the given mxGraph.
Variables
doneResourceSpecifies the resource key for the status message after a long operation.
updatingSelectionResourceSpecifies the resource key for the status message while the selection is being updated.
graphReference to the enclosing mxGraph.
singleSelectionSpecifies if only one selected item at a time is allowed.
Functions
isSingleSelectionReturns singleSelection as a boolean.
setSingleSelectionSets the singleSelection flag.
isSelectedReturns true if the given mxCell is selected.
isEmptyReturns true if no cells are currently selected.
clearClears the selection and fires a <change> event if the selection was not empty.
setCellSelects the specified mxCell using setCells.
setCellsSelects the given array of mxCells and fires a <change> event.
getFirstSelectableCellReturns the first selectable cell in the given array of cells.
addCellAdds the given mxCell to the selection and fires a <select> event.
addCellsAdds the given array of mxCells to the selection and fires a <select> event.
removeCellRemoves the specified mxCell from the selection and fires a <select> event for the remaining cells.
removeCells
changeSelectionInner callback to add the specified mxCell to the selection.
cellAddedInner callback to add the specified mxCell to the selection.
cellRemovedInner callback to remove the specified mxCell from the selection.
mxSelectionChangeAction to change the current root in a view.
Functions
mxCurrentRootChangeConstructs a change of the current root in the given view.
executeChanges the current root of the view.
mxCellEditorIn-place editor for the graph.
Functions
mxCellEditorConstructs a new in-place editor for the specified graph.
Variables
graphReference to the enclosing mxGraph.
textareaHolds the DIV that is used for text editing.
editingCellReference to the mxCell that is currently being edited.
triggerReference to the event that was used to start editing.
modifiedSpecifies if the label has been modified.
autoSizeSpecifies if the textarea should be resized while the text is being edited.
selectTextSpecifies if the text should be selected when editing starts.
emptyLabelTextText to be displayed for empty labels.
escapeCancelsEditingIf true, pressing the escape key will stop editing and not accept the new value.
textNodeReference to the label DOM node that has been hidden.
zIndexSpecifies the zIndex for the textarea.
minResizeDefines the minimum width and height to be used in resize.
wordWrapPaddingCorrection factor for word wrapping width.
blurEnabledIf focusLost should be called if textarea loses the focus.
initialValueHolds the initial editing value to check if the current value was modified.
alignHolds the current temporary horizontal alignment for the cell style.
Functions
initCreates the textarea and installs the event listeners.
applyValueCalled in stopEditing if cancel is false to invoke mxGraph.labelChanged.
setAlignSets the temporary horizontal alignment for the current editing session.
getInitialValueGets the initial editing value for the given cell.
getCurrentValueReturns the current editing value.
isCancelEditingKeyEventReturns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
installListenersInstalls listeners for focus, change and standard key event handling.
isStopEditingEventReturns true if the given keydown event should stop cell editing.
isEventSourceReturns true if this editor is the source for the given native event.
resizeReturns modified.
focusLostCalled if the textarea has lost focus.
getBackgroundColorReturns the background color for the in-place editor.
isLegacyEditorReturns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.
startEditingStarts the editor for the given cell.
isSelectTextReturns selectText.
isSelectTextReturns selectText.
stopEditingStops the editor and applies the value if cancel is false.
prepareTextareaPrepares the textarea for getting its value in stopEditing.
isHideLabelReturns true if the label should be hidden while the cell is being edited.
getMinimumSizeReturns the minimum width and height for editing the given state.
getEditorBoundsReturns the mxRectangle that defines the bounds of the editor.
getEmptyLabelTextReturns the initial label value to be used of the label of the given cell is empty.
getEditingCellReturns the cell that is currently being edited or null if no cell is being edited.
destroyDestroys the editor and removes all associated resources.
mxCellRendererRenders cells into a document object model.
Functions
mxCellRendererarrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
Variables
defaultShapesStatic array that contains the globally registered shapes which are known to all instances of this class.
defaultEdgeShapeDefines the default shape for edges.
defaultVertexShapeDefines the default shape for vertices.
defaultTextShapeDefines the default shape for labels.
legacyControlPositionSpecifies if the folding icon should ignore the horizontal orientation of a swimlane.
legacySpacingSpecifies if spacing and label position should be ignored if overflow is fill or width.
antiAliasAnti-aliasing option for new shapes.
minSvgStrokeWidthMinimum stroke width for SVG output.
forceControlClickHandlerSpecifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
Functions
registerShapeRegisters the given constructor under the specified key in this instance of the renderer.
initializeShapeInitializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
createShapeCreates and returns the shape for the given cell state.
createIndicatorShapeCreates the indicator shape for the given cell state.
getShapeReturns the shape for the given name from defaultShapes.
getShapeConstructorReturns the constructor to be used for creating the shape.
configureShapeConfigures the shape for the given cell state.
postConfigureShapeReplaces any reserved words used for attributes, eg.
checkPlaceholderStylesResolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
resolveColorResolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
getLabelValueReturns the value to be used for the label.
createLabelCreates the label for the given cell state.
initializeLabelInitiailzes the label with a suitable container.
createCellOverlaysCreates the actual shape for showing the overlay for the given cell state.
initializeOverlayInitializes the given overlay.
installOverlayListenersInstalls the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.
createControlCreates the control for the given cell state.
createControlClickHandlerHook for creating the click handler for the folding icon.
initControlInitializes the given control and returns the corresponding DOM node.
isShapeEventReturns true if the event is for the shape of the given state.
isLabelEventReturns true if the event is for the label of the given state.
installListenersInstalls the event listeners for the given cell state.
redrawLabelRedraws the label for the given cell state.
isTextShapeInvalidReturns true if the style for the text shape has changed.
redrawLabelShapeCalled to invoked redraw on the given text shape.
getTextScaleReturns the scaling used for the label of the given state
getLabelBoundsReturns the bounds to be used to draw the label of the given state.
rotateLabelBoundsAdds the shape rotation to the given label bounds and applies the alignment and offsets.
redrawCellOverlaysRedraws the overlays for the given cell state.
redrawControlRedraws the control for the given cell state.
getControlBoundsReturns the bounds to be used to draw the control (folding icon) of the given state.
insertStateAfterInserts the given array of mxShapes after the given nodes in the DOM.
getShapesForStateReturns the mxShapes for the given cell state in the order in which they should appear in the DOM.
redrawUpdates the bounds or points and scale of the shapes for the given cell state.
redrawShapeRedraws the shape for the given cell state.
doRedrawShapeInvokes redraw on the shape of the given state.
isShapeInvalidReturns true if the given shape must be repainted.
destroyDestroys the shapes associated with the given cell state.
mxEdgeStyleProvides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.
Functions
EntityRelationImplements an entity relation style for edges (as used in database schema diagrams).
LoopImplements a self-reference, aka.
ElbowConnectorUses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSideImplements a vertical elbow edge.
TopToBottomImplements a horizontal elbow edge.
SegmentConnectorImplements an orthogonal edge style.
OrthConnectorImplements a local orthogonal router between the given cells.
mxStyleRegistrySingleton class that acts as a global converter from string to object values in a style.
Variables
valuesMaps from strings to objects.
Functions
putValuePuts the given object into the registry under the given name.
getValueReturns the value associated with the given name.
getNameReturns the name for the given value.
mxGraphViewExtends mxEventSource to implement a view for a graph.
Events
mxEvent.UNDOFires after the root was changed in setCurrentRoot.
mxEvent.SCALE_AND_TRANSLATEFires after the scale and translate have been changed in scaleAndTranslate.
mxEvent.SCALEFires after the scale was changed in setScale.
mxEvent.TRANSLATEFires after the translate was changed in setTranslate.
mxEvent.DOWN and mxEvent.UPFire if the current root is changed by executing an mxCurrentRootChange.
Functions
mxGraphViewConstructs a new view for the given mxGraph.
Variables
doneResourceSpecifies the resource key for the status message after a long operation.
Functions
updatingDocumentResourceSpecifies the resource key for the status message while the document is being updated.
Variables
allowEvalSpecifies if string values in cell styles should be evaluated using mxUtils.eval.
captureDocumentGestureSpecifies if a gesture should be captured when it goes outside of the graph container.
optimizeVmlReflowsSpecifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.
renderingSpecifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
graphReference to the enclosing mxGraph.
currentRootmxCell that acts as the root of the displayed cell hierarchy.
graphBoundsmxRectangle that caches the scales, translated bounds of the current view.
scaleSpecifies the scale.
translatemxPoint that specifies the current translation.
statesmxDictionary that maps from cell IDs to mxCellStates.
updateStyleSpecifies if the style should be updated in each validation step.
lastNodeDuring validation, this contains the last DOM node that was processed.
lastHtmlNodeDuring validation, this contains the last HTML DOM node that was processed.
lastForegroundNodeDuring validation, this contains the last edge’s DOM node that was processed.
lastForegroundHtmlNodeDuring validation, this contains the last edge HTML DOM node that was processed.
Functions
getGraphBoundsReturns graphBounds.
setGraphBoundsSets graphBounds.
getBoundsReturns the union of all mxCellStates for the given array of mxCells.
setCurrentRootSets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.
scaleAndTranslateSets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.
getScaleReturns the scale.
setScaleSets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
getTranslateReturns the translate.
setTranslateSets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
viewStateChangedInvoked after scale and/or translate has changed.
refreshClears the view if currentRoot is not null and revalidates.
revalidateRevalidates the complete view with all cell states.
clearRemoves the state of the given cell and all descendants if the given cell is not the current root.
invalidateInvalidates the state of the given cell, all its descendants and connected edges.
validateCalls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
getEmptyBoundsReturns the bounds for an empty graph.
getBoundingBoxReturns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
createBackgroundPageShapeCreates and returns the shape used as the background page.
validateBackgroundCalls validateBackgroundImage and validateBackgroundPage.
validateBackgroundImageValidates the background image.
validateBackgroundPageValidates the background page.
getBackgroundPageBoundsReturns the bounds for the background page.
redrawBackgroundImageUpdates the bounds and redraws the background image.
validateCellRecursively creates the cell state for the given cell if visible is true and the given cell is visible.
validateCellStateValidates and repaints the mxCellState for the given mxCell.
updateCellStateUpdates the given mxCellState.
isCellCollapsedReturns true if the children of the given cell should not be visible in the view.
updateVertexStateValidates the given cell state.
updateEdgeStateValidates the given cell state.
updateVertexLabelOffsetUpdates the absoluteOffset of the given vertex cell state.
resetValidationStateResets the current validation state.
stateValidatedInvoked when a state has been processed in <validatePoints>.
updateFixedTerminalPointsSets the initial absolute terminal points in the given state before the edge style is computed.
updateFixedTerminalPointSets the fixed source or target terminal point on the given edge.
getFixedTerminalPointReturns the fixed source or target terminal point for the given edge.
updateBoundsFromStencilUpdates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.
updatePointsUpdates the absolute points in the given state using the specified array of mxPoints as the relative points.
transformControlPointTransforms the given control point to an absolute point.
isLoopStyleEnabledReturns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.
getEdgeStyleReturns the edge style function to be used to render the given edge state.
updateFloatingTerminalPointsUpdates the terminal points in the given state after the edge style was computed for the edge.
updateFloatingTerminalPointUpdates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.
getFloatingTerminalPointReturns the floating terminal point for the given edge, start and end state, where start is the source if source is true.
getTerminalPortReturns an mxCellState that represents the source or target terminal or port for the given edge.
getPerimeterPointReturns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.
getRoutingCenterXReturns the x-coordinate of the center point for automatic routing.
getRoutingCenterYReturns the y-coordinate of the center point for automatic routing.
getPerimeterBoundsReturns the perimeter bounds for the given terminal, edge pair as an mxRectangle.
getPerimeterFunctionReturns the perimeter function for the given state.
getNextPointReturns the nearest point in the list of absolute points or the center of the opposite terminal.
getVisibleTerminalReturns the nearest ancestor terminal that is visible.
updateEdgeBoundsUpdates the given state using the bounding box of t he absolute points.
getPointReturns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
getRelativePointGets the relative point that describes the given, absolute label position for the given edge state.
updateEdgeLabelOffsetUpdates mxCellState.absoluteOffset for the given state.
getStateReturns the mxCellState for the given cell.
isRenderingReturns rendering.
setRenderingSets rendering.
isAllowEvalReturns allowEval.
setAllowEvalSets allowEval.
getStatesReturns states.
setStatesSets states.
getCellStatesReturns the mxCellStates for the given array of mxCells.
removeStateRemoves and returns the mxCellState for the given cell.
createStateCreates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.
getCanvasReturns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.
getBackgroundPaneReturns the DOM node that represents the background layer.
getDrawPaneReturns the DOM node that represents the main drawing layer.
getOverlayPaneReturns the DOM node that represents the layer above the drawing layer.
getDecoratorPaneReturns the DOM node that represents the topmost drawing layer.
isContainerEventReturns true if the event origin is one of the drawing panes or containers of the view.
isScrollEventReturns true if the event origin is one of the scrollbars of the container in IE.
initInitializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.
installListenersInstalls the required listeners in the container.
createCreates the DOM nodes for the HTML display.
updateHtmlCanvasSizeUpdates the size of the HTML canvas.
createHtmlPaneCreates and returns a drawing pane in HTML (DIV).
createCreates the DOM nodes for the VML display.
createVmlPaneCreates a drawing pane in VML (group).
createCreates and returns the DOM nodes for the SVG display.
updateContainerStyleUpdates the style of the container after installing the SVG DOM elements.
destroyDestroys the view and all its resources.
mxCurrentRootChangeAction to change the current root in a view.
Functions
mxCurrentRootChangeConstructs a change of the current root in the given view.
executeChanges the current root of the view.
mxGraphExtends mxEventSource to implement a graph component for the browser.
Events
mxEvent.ROOTFires if the root in the model has changed.
mxEvent.ALIGN_CELLSFires between begin- and endUpdate in alignCells.
mxEvent.FLIP_EDGEFires between begin- and endUpdate in flipEdge.
mxEvent.ORDER_CELLSFires between begin- and endUpdate in orderCells.
mxEvent.CELLS_ORDEREDFires between begin- and endUpdate in cellsOrdered.
mxEvent.GROUP_CELLSFires between begin- and endUpdate in groupCells.
mxEvent.UNGROUP_CELLSFires between begin- and endUpdate in ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENTFires between begin- and endUpdate in removeCellsFromParent.
mxEvent.ADD_CELLSFires between begin- and endUpdate in addCells.
mxEvent.CELLS_ADDEDFires between begin- and endUpdate in cellsAdded.
mxEvent.REMOVE_CELLSFires between begin- and endUpdate in removeCells.
mxEvent.CELLS_REMOVEDFires between begin- and endUpdate in cellsRemoved.
mxEvent.SPLIT_EDGEFires between begin- and endUpdate in splitEdge.
mxEvent.TOGGLE_CELLSFires between begin- and endUpdate in toggleCells.
mxEvent.FOLD_CELLSFires between begin- and endUpdate in foldCells.
mxEvent.CELLS_FOLDEDFires between begin- and endUpdate in cellsFolded.
mxEvent.UPDATE_CELL_SIZEFires between begin- and endUpdate in updateCellSize.
mxEvent.RESIZE_CELLSFires between begin- and endUpdate in resizeCells.
mxEvent.CELLS_RESIZEDFires between begin- and endUpdate in cellsResized.
mxEvent.MOVE_CELLSFires between begin- and endUpdate in moveCells.
mxEvent.CELLS_MOVEDFires between begin- and endUpdate in cellsMoved.
mxEvent.CONNECT_CELLFires between begin- and endUpdate in connectCell.
mxEvent.CELL_CONNECTEDFires between begin- and endUpdate in cellConnected.
mxEvent.REFRESHFires after refresh was executed.
mxEvent.CLICKFires in click after a click event.
mxEvent.DOUBLE_CLICKFires in dblClick after a double click.
mxEvent.GESTUREFires in fireGestureEvent after a touch gesture.
mxEvent.TAP_AND_HOLDFires in tapAndHold if a tap and hold event was detected.
mxEvent.FIRE_MOUSE_EVENTFires in fireMouseEvent before the mouse listeners are invoked.
mxEvent.SIZEFires after sizeDidChange was executed.
mxEvent.START_EDITINGFires before the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STARTEDFires after the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STOPPEDFires after the in-place editor stops in stopEditing.
mxEvent.LABEL_CHANGEDFires between begin- and endUpdate in cellLabelChanged.
mxEvent.ADD_OVERLAYFires after an overlay is added in addCellOverlay.
mxEvent.REMOVE_OVERLAYFires after an overlay is removed in removeCellOverlay and removeCellOverlays.
mxGraphConstructs a new mxGraph in the specified container.
Variables
mouseListenersHolds the mouse event listeners.
isMouseDownHolds the state of the mouse button.
modelHolds the mxGraphModel that contains the cells to be displayed.
viewHolds the mxGraphView that caches the mxCellStates for the cells.
stylesheetHolds the mxStylesheet that defines the appearance of the cells.
selectionModelHolds the mxGraphSelectionModel that models the current selection.
cellEditorHolds the mxCellEditor that is used as the in-place editing.
cellRendererHolds the mxCellRenderer for rendering the cells in the graph.
multiplicitiesAn array of mxMultiplicities describing the allowed connections in a graph.
renderHintRenderHint as it was passed to the constructor.
dialectDialect to be used for drawing the graph.
gridSizeSpecifies the grid size.
gridEnabledSpecifies if the grid is enabled.
portsEnabledSpecifies if ports are enabled.
nativeDoubleClickEnabledSpecifies if native double click events should be detected.
doubleTapEnabledSpecifies if double taps on touch-based devices should be handled as a double click.
doubleTapTimeoutSpecifies the timeout for double taps and non-native double clicks.
doubleTapToleranceSpecifies the tolerance for double taps and double clicks in quirks mode.
lastTouchXHolds the x-coordinate of the last touch event for double tap detection.
lastTouchXHolds the y-coordinate of the last touch event for double tap detection.
lastTouchTimeHolds the time of the last touch event for double click detection.
tapAndHoldEnabledSpecifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelaySpecifies the time for a tap and hold.
tapAndHoldInProgressTrue if the timer for tap and hold events is running.
tapAndHoldValidTrue as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.
initialTouchXHolds the x-coordinate of the intial touch event for tap and hold.
initialTouchYHolds the y-coordinate of the intial touch event for tap and hold.
toleranceTolerance for a move to be handled as a single click.
defaultOverlapValue returned by getOverlap if isAllowOverlapParent returns true for the given cell.
defaultParentSpecifies the default parent to be used to insert new cells.
alternateEdgeStyleSpecifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
backgroundImageSpecifies the mxImage to be returned by getBackgroundImage.
pageVisibleSpecifies if the background page should be visible.
pageBreaksVisibleSpecifies if a dashed line should be drawn between multiple pages.
pageBreakColorSpecifies the color for page breaks.
pageBreakDashedSpecifies the page breaks should be dashed.
minPageBreakDistSpecifies the minimum distance for page breaks to be visible.
preferPageSizeSpecifies if the graph size should be rounded to the next page number in sizeDidChange.
pageFormatSpecifies the page format for the background page.
pageScaleSpecifies the scale of the background page.
enabledSpecifies the return value for isEnabled.
escapeEnabledSpecifies if mxKeyHandler should invoke escape when the escape key is pressed.
invokesStopCellEditingIf true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
enterStopsCellEditingIf true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
useScrollbarsForPanningSpecifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
exportEnabledSpecifies the return value for canExportCell.
importEnabledSpecifies the return value for canImportCell.
cellsLockedSpecifies the return value for isCellLocked.
cellsCloneableSpecifies the return value for isCellCloneable.
foldingEnabledSpecifies if folding (collapse and expand via an image icon in the graph should be enabled).
cellsEditableSpecifies the return value for isCellEditable.
cellsDeletableSpecifies the return value for isCellDeletable.
cellsMovableSpecifies the return value for isCellMovable.
edgeLabelsMovableSpecifies the return value for edges in isLabelMovable.
vertexLabelsMovableSpecifies the return value for vertices in isLabelMovable.
dropEnabledSpecifies the return value for isDropEnabled.
splitEnabledSpecifies if dropping onto edges should be enabled.
cellsResizableSpecifies the return value for isCellResizable.
cellsBendableSpecifies the return value for isCellsBendable.
cellsSelectableSpecifies the return value for isCellSelectable.
cellsDisconnectableSpecifies the return value for <isCellDisconntable>.
autoSizeCellsSpecifies if the graph should automatically update the cell size after an edit.
autoSizeCellsOnAddSpecifies if autoSize style should be applied when cells are added.
autoScrollSpecifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
ignoreScrollbarsSpecifies if the graph should automatically scroll regardless of the scrollbars.
translateToScrollPositionSpecifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
timerAutoScrollSpecifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
allowAutoPanningSpecifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
autoExtendSpecifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
maximumGraphBoundsmxRectangle that specifies the area in which all cells in the diagram should be placed.
minimumGraphSizemxRectangle that specifies the minimum size of the graph.
minimumContainerSizemxRectangle that specifies the minimum size of the <container> if resizeContainer is true.
maximumContainerSizemxRectangle that specifies the maximum size of the container if resizeContainer is true.
resizeContainerSpecifies if the container should be resized to the graph size when the graph size has changed.
borderBorder to be added to the bottom and right side when the container is being resized after the graph has been changed.
keepEdgesInForegroundSpecifies if edges should appear in the foreground regardless of their order in the model.
keepEdgesInBackgroundSpecifies if edges should appear in the background regardless of their order in the model.
allowNegativeCoordinatesSpecifies if negative coordinates for vertices are allowed.
constrainChildrenSpecifies if a child should be constrained inside the parent bounds after a move or resize of the child.
constrainRelativeChildrenSpecifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
extendParentsSpecifies if a parent should contain the child bounds after a resize of the child.
extendParentsOnAddSpecifies if parents should be extended according to the extendParents switch if cells are added.
extendParentsOnAddSpecifies if parents should be extended according to the extendParents switch if cells are added.
recursiveResizeSpecifies the return value for isRecursiveResize.
collapseToPreferredSizeSpecifies if the cell size should be changed to the preferred size when a cell is first collapsed.
zoomFactorSpecifies the factor used for zoomIn and zoomOut.
keepSelectionVisibleOnZoomSpecifies if the viewport should automatically contain the selection cells after a zoom operation.
centerZoomSpecifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
resetViewOnRootChangeSpecifies if the scale and translate should be reset if the root changes in the model.
resetEdgesOnResizeSpecifies if edge control points should be reset after the resize of a connected cell.
resetEdgesOnMoveSpecifies if edge control points should be reset after the move of a connected cell.
resetEdgesOnConnectSpecifies if edge control points should be reset after the the edge has been reconnected.
allowLoopsSpecifies if loops (aka self-references) are allowed.
defaultLoopStylemxEdgeStyle to be used for loops.
multigraphSpecifies if multiple edges in the same direction between the same pair of vertices are allowed.
connectableEdgesSpecifies if edges are connectable.
allowDanglingEdgesSpecifies if edges with disconnected terminals are allowed in the graph.
cloneInvalidEdgesSpecifies if edges that are cloned should be validated and only inserted if they are valid.
disconnectOnMoveSpecifies if edges should be disconnected from their terminals when they are moved.
labelsVisibleSpecifies if labels should be visible.
htmlLabelsSpecifies the return value for isHtmlLabel.
swimlaneSelectionEnabledSpecifies if swimlanes should be selectable via the content if the mouse is released.
swimlaneNestingSpecifies if nesting of swimlanes is allowed.
swimlaneIndicatorColorAttributeThe attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
imageBundlesHolds the list of image bundles.
minFitScaleSpecifies the minimum scale to be applied in fit.
maxFitScaleSpecifies the maximum scale to be applied in fit.
panDxCurrent horizontal panning value.
panDyCurrent vertical panning value.
collapsedImageSpecifies the mxImage to indicate a collapsed state.
expandedImageSpecifies the mxImage to indicate a expanded state.
warningImageSpecifies the mxImage for the image to be used to display a warning overlay.
alreadyConnectedResourceSpecifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
containsValidationErrorsResourceSpecifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
collapseExpandResourceSpecifies the resource key for the tooltip on the collapse/expand icon.
initInitializes the <container> and creates the respective datastructures.
createHandlersCreates the tooltip-, panning-, connection- and graph-handler (in this order).
createTooltipHandlerCreates and returns a new mxTooltipHandler to be used in this graph.
createSelectionCellsHandlerCreates and returns a new mxTooltipHandler to be used in this graph.
createConnectionHandlerCreates and returns a new mxConnectionHandler to be used in this graph.
createGraphHandlerCreates and returns a new mxGraphHandler to be used in this graph.
createPanningHandlerCreates and returns a new mxPanningHandler to be used in this graph.
createPopupMenuHandlerCreates and returns a new mxPopupMenuHandler to be used in this graph.
createSelectionModelCreates a new mxGraphSelectionModel to be used in this graph.
createStylesheetCreates a new mxGraphSelectionModel to be used in this graph.
createGraphViewCreates a new mxGraphView to be used in this graph.
createCellRendererCreates a new mxCellRenderer to be used in this graph.
createCellEditorCreates a new mxCellEditor to be used in this graph.
getModelReturns the mxGraphModel that contains the cells.
getViewReturns the mxGraphView that contains the mxCellStates.
getStylesheetReturns the mxStylesheet that defines the style.
setStylesheetSets the mxStylesheet that defines the style.
getSelectionModelReturns the mxGraphSelectionModel that contains the selection.
setSelectionModelSets the <mxSelectionModel> that contains the selection.
getSelectionCellsForChangesReturns the cells to be selected for the given array of changes.
graphModelChangedCalled when the graph model changes.
updateSelectionRemoves selection cells that are not in the model from the selection.
processChangeProcesses the given change and invalidates the respective cached data in view.
removeStateForCellRemoves all cached information for the given cell and its descendants.
Overlays
addCellOverlayAdds an mxCellOverlay for the specified cell.
getCellOverlaysReturns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
removeCellOverlayRemoves and returns the given mxCellOverlay from the given cell.
removeCellOverlaysRemoves all mxCellOverlays from the given cell.
clearCellOverlaysRemoves all mxCellOverlays in the graph for the given cell and all its descendants.
setCellWarningCreates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
In-place editing
startEditingCalls startEditingAtCell using the given cell or the first selection cell.
startEditingAtCellFires a startEditing event and invokes mxCellEditor.startEditing on <editor>.
getEditingValueReturns the initial value for in-place editing.
stopEditingStops the current editing and fires a <editingStopped> event.
labelChangedSets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
cellLabelChangedSets the new label for a cell.
Event processing
escapeProcesses an escape keystroke.
clickProcesses a singleclick on an optional cell and fires a click event.
dblClickProcesses a doubleclick on an optional cell and fires a <dblclick> event.
tapAndHoldHandles the mxMouseEvent by highlighting the mxCellState.
scrollPointToVisibleScrolls the graph to the given point, extending the graph container if specified.
createPanningManagerCreates and returns an mxPanningManager.
getBorderSizesReturns the size of the border and padding on all four sides of the container.
getPreferredPageSizeReturns the preferred size of the background page if preferPageSize is true.
fitScales the graph such that the complete diagram fits into <container> and returns the current scale in the view.
sizeDidChangeCalled when the size of the graph has changed.
doResizeContainerResizes the container for the given graph width and height.
updatePageBreaksInvokes from sizeDidChange to redraw the page breaks.
Cell styles
getCellStyleReturns an array of key, value pairs representing the cell style for the given cell.
postProcessCellStyleTries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
setCellStyleSets the style of the specified cells.
toggleCellStyleToggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
toggleCellStylesToggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
setCellStylesSets the key to value in the styles of the given cells.
toggleCellStyleFlagsToggles the given bit for the given key in the styles of the specified cells.
setCellStyleFlagsSets or toggles the given bit for the given key in the styles of the specified cells.
Cell alignment and orientation
alignCellsAligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
flipEdgeToggles the style of the given edge between null (or empty) and alternateEdgeStyle.
addImageBundleAdds the specified mxImageBundle.
removeImageBundleRemoves the specified mxImageBundle.
getImageFromBundlesSearches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
Order
orderCellsMoves the given cells to the front or back.
cellsOrderedMoves the given cells to the front or back.
Grouping
groupCellsAdds the cells into the given group.
getCellsForGroupReturns the cells with the same parent as the first cell in the given array.
getBoundsForGroupReturns the bounds to be used for the given group and children.
createGroupCellHook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.
ungroupCellsUngroups the given cells by moving the children the children to their parents parent and removing the empty groups.
removeCellsAfterUngroupHook to remove the groups after ungroupCells.
removeCellsFromParentRemoves the specified cells from their parents and adds them to the default parent.
updateGroupBoundsUpdates the bounds of the given groups to include all children and returns the passed-in cells.
getBoundingBoxReturns the bounding box for the given array of mxCells.
Cell cloning, insertion and removal
cloneCellReturns the clone for the given cell.
cloneCellsReturns the clones for the given cells.
insertVertexAdds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
createVertexHook method that creates the new vertex for insertVertex.
insertEdgeAdds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
createEdgeHook method that creates the new edge for insertEdge.
addEdgeAdds the edge to the parent and connects it to the given source and target terminals.
addCellAdds the cell to the parent and connects it to the given source and target terminals.
addCellsAdds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
cellsAddedAdds the specified cells to the given parent.
autoSizeCellResizes the specified cell to just fit around the its label and/or children
removeCellsRemoves the given cells from the graph including all connected edges if includeEdges is true.
cellsRemovedRemoves the given cells from the model.
splitEdgeSplits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
Cell visibility
toggleCellsSets the visible state of the specified cells and all connected edges if includeEdges is true.
cellsToggledSets the visible state of the specified cells.
Folding
foldCellsSets the collapsed state of the specified cells and all descendants if recurse is true.
cellsFoldedSets the collapsed state of the specified cells.
swapBoundsSwaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
updateAlternateBoundsUpdates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
addAllEdgesReturns an array with the given cells and all edges that are connected to a cell or one of its descendants.
getAllEdgesReturns all edges connected to the given cells or its descendants.
Cell sizing
updateCellSizeUpdates the size of the given cell in the model using cellSizeUpdated.
cellSizeUpdatedUpdates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
getPreferredSizeForCellReturns the preferred width and height of the given mxCell as an mxRectangle.
resizeCellSets the bounds of the given cell using resizeCells.
resizeCellsSets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
cellsResizedSets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
cellResizedResizes the parents recursively so that they contain the complete area of the resized child cell.
resizeChildCellsResizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
constrainChildCellsConstrains the children of the given cell using constrainChild.
scaleCellScales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
extendParentResizes the parents recursively so that they contain the complete area of the resized child cell.
Cell moving
importCellsClones and inserts the given cells into the graph using the move method and returns the inserted cells.
moveCellsMoves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
cellsMovedMoves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
translateCellTranslates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
getCellContainmentAreaReturns the mxRectangle inside which a cell is to be kept.
getMaximumGraphBoundsReturns the bounds inside which the diagram should be kept as an mxRectangle.
constrainChildKeeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
resetEdgesResets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
resetEdgeResets the control points of the given edge.
Cell connecting and connection constraints
getOutlineConstraintReturns the constraint used to connect to the outline of the given state.
getAllConnectionConstraintsReturns an array of all mxConnectionConstraints for the given terminal.
getConnectionConstraintReturns an mxConnectionConstraint that describes the given connection point.
setConnectionConstraintSets the mxConnectionConstraint that describes the given connection point.
getConnectionPointReturns the nearest point in the list of absolute points or the center of the opposite terminal.
connectCellConnects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
cellConnectedSets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
disconnectGraphDisconnects the given edges from the terminals which are not in the given array.
Drilldown
getCurrentRootReturns the current root of the displayed cell hierarchy.
getTranslateForRootReturns the translation to be used if the given cell is the root cell as an mxPoint.
isPortReturns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
getTerminalForPortReturns the terminal to be used for a given port.
getChildOffsetForCellReturns the offset to be used for the cells inside the given cell.
enterGroupUses the given cell as the root of the displayed cell hierarchy.
exitGroupChanges the current root to the next valid root in the displayed cell hierarchy.
homeUses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
isValidRootReturns true if the given cell is a valid root for the cell display hierarchy.
Graph display
getGraphBoundsReturns the bounds of the visible graph.
getCellBoundsReturns the scaled, translated bounds for the given cell.
getBoundingBoxFromGeometryReturns the bounding box for the geometries of the vertices in the given array of cells.
refreshClears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
snapSnaps the given numeric value to the grid if gridEnabled is true.
panGraphShifts the graph display by the given amount.
zoomInZooms into the graph by zoomFactor.
zoomOutZooms out of the graph by zoomFactor.
zoomActualResets the zoom and panning in the view.
zoomToZooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
centerCenters the graph in the container.
zoomZooms the graph using the given factor.
zoomToRectZooms the graph to the specified rectangle.
scrollCellToVisiblePans the graph so that it shows the given cell.
scrollRectToVisiblePans the graph so that it shows the given rectangle.
getCellGeometryReturns the mxGeometry for the given cell.
isCellVisibleReturns true if the given cell is visible in this graph.
isCellCollapsedReturns true if the given cell is collapsed in this graph.
isCellConnectableReturns true if the given cell is connectable in this graph.
isOrthogonalReturns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
isLoopReturns true if the given cell state is a loop.
isCloneEventReturns true if the given event is a clone event.
isTransparentClickEventHook for implementing click-through behaviour on selected cells.
isToggleEventReturns true if the given event is a toggle event.
isGridEnabledEventReturns true if the given mouse event should be aligned to the grid.
isConstrainedEventReturns true if the given mouse event should be aligned to the grid.
isIgnoreTerminalEventReturns true if the given mouse event should not allow any connections to be made.
Validation
validationAlertDisplays the given validation error in a dialog.
isEdgeValidChecks if the return value of getEdgeValidationError for the given arguments is null.
getEdgeValidationErrorReturns the validation error message to be displayed when inserting or changing an edges’ connectivity.
validateEdgeHook method for subclassers to return an error message for the given edge and terminals.
validateGraphValidates the graph by validating each descendant of the given cell or the root of the model.
getCellValidationErrorChecks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
validateCellHook method for subclassers to return an error message for the given cell and validation context.
Graph appearance
getBackgroundImageReturns the backgroundImage as an mxImage.
setBackgroundImageSets the new backgroundImage.
getFoldingImageReturns the mxImage used to display the collapsed state of the specified cell state.
convertValueToStringReturns the textual representation for the given cell.
getLabelReturns a string or DOM node that represents the label for the given cell.
isHtmlLabelReturns true if the label must be rendered as HTML markup.
isHtmlLabelsReturns htmlLabels.
setHtmlLabelsSets htmlLabels.
isWrappingThis enables wrapping for HTML labels.
isLabelClippedReturns true if the overflow portion of labels should be hidden.
getTooltipReturns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
getTooltipForCellReturns the string or DOM node to be used as the tooltip for the given cell.
getLinkForCellReturns the string to be used as the link for the given cell.
getCursorForMouseEventReturns the cursor value to be used for the CSS of the shape for the given event.
getCursorForCellReturns the cursor value to be used for the CSS of the shape for the given cell.
getStartSizeReturns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
getImageReturns the image URL for the given cell state.
getVerticalAlignReturns the vertical alignment for the given cell state.
getIndicatorColorReturns the indicator color for the given cell state.
getIndicatorGradientColorReturns the indicator gradient color for the given cell state.
getIndicatorShapeReturns the indicator shape for the given cell state.
getIndicatorImageReturns the indicator image for the given cell state.
getBorderReturns the value of border.
setBorderSets the value of border.
isSwimlaneReturns true if the given cell is a swimlane in the graph.
Graph behaviour
isResizeContainerReturns resizeContainer.
setResizeContainerSets resizeContainer.
isEnabledReturns true if the graph is enabled.
setEnabledSpecifies if the graph should allow any interactions.
isEscapeEnabledReturns escapeEnabled.
setEscapeEnabledSets escapeEnabled.
isInvokesStopCellEditingReturns invokesStopCellEditing.
setInvokesStopCellEditingSets invokesStopCellEditing.
isEnterStopsCellEditingReturns enterStopsCellEditing.
setEnterStopsCellEditingSets enterStopsCellEditing.
isCellLockedReturns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
isCellsLockedReturns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
setCellsLockedSets if any cell may be moved, sized, bended, disconnected, edited or selected.
getCloneableCellsReturns the cells which may be exported in the given array of cells.
isCellCloneableReturns true if the given cell is cloneable.
isCellsCloneableReturns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
setCellsCloneableSpecifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
getExportableCellsReturns the cells which may be exported in the given array of cells.
canExportCellReturns true if the given cell may be exported to the clipboard.
getImportableCellsReturns the cells which may be imported in the given array of cells.
canImportCellReturns true if the given cell may be imported from the clipboard.
isCellSelectableReturns true if the given cell is selectable.
isCellsSelectableReturns cellsSelectable.
setCellsSelectableSets cellsSelectable.
getDeletableCellsReturns the cells which may be exported in the given array of cells.
isCellDeletableReturns true if the given cell is moveable.
isCellsDeletableReturns cellsDeletable.
setCellsDeletableSets cellsDeletable.
isLabelMovableReturns true if the given edges’s label is moveable.
isCellRotatableReturns true if the given cell is rotatable.
getMovableCellsReturns the cells which are movable in the given array of cells.
isCellMovableReturns true if the given cell is moveable.
isCellsMovableReturns cellsMovable.
setCellsMovableSpecifies if the graph should allow moving of cells.
isGridEnabledReturns gridEnabled as a boolean.
setGridEnabledSpecifies if the grid should be enabled.
isPortsEnabledReturns portsEnabled as a boolean.
setPortsEnabledSpecifies if the ports should be enabled.
getGridSizeReturns gridSize.
setGridSizeSets gridSize.
getToleranceReturns tolerance.
setToleranceSets tolerance.
isVertexLabelsMovableReturns vertexLabelsMovable.
setVertexLabelsMovableSets vertexLabelsMovable.
isEdgeLabelsMovableReturns edgeLabelsMovable.
isEdgeLabelsMovableSets edgeLabelsMovable.
isSwimlaneNestingReturns swimlaneNesting as a boolean.
setSwimlaneNestingSpecifies if swimlanes can be nested by drag and drop.
isSwimlaneSelectionEnabledReturns swimlaneSelectionEnabled as a boolean.
setSwimlaneSelectionEnabledSpecifies if swimlanes should be selected if the mouse is released over their content area.
isMultigraphReturns multigraph as a boolean.
setMultigraphSpecifies if the graph should allow multiple connections between the same pair of vertices.
isAllowLoopsReturns allowLoops as a boolean.
setAllowDanglingEdgesSpecifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
isAllowDanglingEdgesReturns allowDanglingEdges as a boolean.
setConnectableEdgesSpecifies if edges should be connectable.
isConnectableEdgesReturns connectableEdges as a boolean.
setCloneInvalidEdgesSpecifies if edges should be inserted when cloned but not valid wrt.
isCloneInvalidEdgesReturns cloneInvalidEdges as a boolean.
setAllowLoopsSpecifies if loops are allowed.
isDisconnectOnMoveReturns disconnectOnMove as a boolean.
setDisconnectOnMoveSpecifies if edges should be disconnected when moved.
isDropEnabledReturns dropEnabled as a boolean.
setDropEnabledSpecifies if the graph should allow dropping of cells onto or into other cells.
isSplitEnabledReturns splitEnabled as a boolean.
setSplitEnabledSpecifies if the graph should allow dropping of cells onto or into other cells.
isCellResizableReturns true if the given cell is resizable.
isCellsResizableReturns cellsResizable.
setCellsResizableSpecifies if the graph should allow resizing of cells.
isTerminalPointMovableReturns true if the given terminal point is movable.
isCellBendableReturns true if the given cell is bendable.
isCellsBendableReturns <cellsBenadable>.
setCellsBendableSpecifies if the graph should allow bending of edges.
isCellEditableReturns true if the given cell is editable.
isCellsEditableReturns cellsEditable.
setCellsEditableSpecifies if the graph should allow in-place editing for cell labels.
isCellDisconnectableReturns true if the given cell is disconnectable from the source or target terminal.
isCellsDisconnectableReturns cellsDisconnectable.
setCellsDisconnectableSets cellsDisconnectable.
isValidSourceReturns true if the given cell is a valid source for new connections.
isValidTargetReturns isValidSource for the given cell.
isValidConnectionReturns true if the given target cell is a valid target for source.
setConnectableSpecifies if the graph should allow new connections.
isConnectableReturns true if the <connectionHandler> is enabled.
setTooltipsSpecifies if tooltips should be enabled.
setPanningSpecifies if panning should be enabled.
isEditingReturns true if the given cell is currently being edited.
isAutoSizeCellReturns true if the size of the given cell should automatically be updated after a change of the label.
isAutoSizeCellsReturns autoSizeCells.
setAutoSizeCellsSpecifies if cell sizes should be automatically updated after a label change.
isExtendParentReturns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
isExtendParentsReturns extendParents.
setExtendParentsSets extendParents.
isExtendParentsOnAddReturns extendParentsOnAdd.
setExtendParentsOnAddSets extendParentsOnAdd.
isExtendParentsOnMoveReturns <extendParentsOnMove>.
setExtendParentsOnMoveSets <extendParentsOnMove>.
isRecursiveResizeReturns recursiveResize.
setRecursiveResizeSets recursiveResize.
isConstrainChildReturns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
isConstrainChildrenReturns constrainChildren.
setConstrainChildrenSets constrainChildren.
isConstrainRelativeChildrenReturns constrainRelativeChildren.
setConstrainRelativeChildrenSets constrainRelativeChildren.
isConstrainChildrenReturns allowNegativeCoordinates.
setConstrainChildrenSets allowNegativeCoordinates.
getOverlapReturns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
isAllowOverlapParentReturns true if the given cell is allowed to be placed outside of the parents area.
getFoldableCellsReturns the cells which are movable in the given array of cells.
isCellFoldableReturns true if the given cell is foldable.
isValidDropTargetReturns true if the given cell is a valid drop target for the specified cells.
isSplitTargetReturns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
getDropTargetReturns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
Cell retrieval
getDefaultParentReturns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
setDefaultParentSets the defaultParent to the given cell.
getSwimlaneReturns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
getSwimlaneAtReturns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
getCellAtReturns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
intersectsReturns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
hitsSwimlaneContentReturns true if the given coordinate pair is inside the content are of the given swimlane.
getChildVerticesReturns the visible child vertices of the given parent.
getChildEdgesReturns the visible child edges of the given parent.
getChildCellsReturns the visible child vertices or edges in the given parent.
getConnectionsReturns all visible edges connected to the given cell without loops.
getIncomingEdgesReturns the visible incoming edges for the given cell.
getOutgoingEdgesReturns the visible outgoing edges for the given cell.
getEdgesReturns the incoming and/or outgoing edges for the given cell.
isValidAncestorReturns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
getOppositesReturns all distinct visible opposite cells for the specified terminal on the given edges.
getEdgesBetweenReturns the edges between the given source and target.
getPointForEventReturns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.
getCellsReturns the child vertices and edges of the given parent that are contained in the given rectangle.
getCellsBeyondReturns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
findTreeRootsReturns all children in the given parent which do not have incoming edges.
traverseTraverses the (directed) graph invoking the given function for each visited vertex and edge.
Selection
isCellSelectedReturns true if the given cell is selected.
isSelectionEmptyReturns true if the selection is empty.
clearSelectionClears the selection using mxGraphSelectionModel.clear.
getSelectionCountReturns the number of selected cells.
getSelectionCellReturns the first cell from the array of selected mxCells.
getSelectionCellsReturns the array of selected mxCells.
setSelectionCellSets the selection cell.
setSelectionCellsSets the selection cell.
addSelectionCellAdds the given cell to the selection.
addSelectionCellsAdds the given cells to the selection.
removeSelectionCellRemoves the given cell from the selection.
removeSelectionCellsRemoves the given cells from the selection.
selectRegionSelects and returns the cells inside the given rectangle for the specified event.
selectNextCellSelects the next cell.
selectPreviousCellSelects the previous cell.
selectParentCellSelects the parent cell.
selectChildCellSelects the first child cell.
selectCellSelects the next, parent, first child or previous cell, if all arguments are false.
selectAllSelects all children of the given parent cell or the children of the default parent if no parent is specified.
selectVerticesSelect all vertices inside the given parent or the default parent.
selectVerticesSelect all vertices inside the given parent or the default parent.
selectCellsSelects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
selectCellForEventSelects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
selectCellsForEventSelects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Selection state
createHandlerCreates a new handler for the given cell state.
createVertexHandlerHooks to create a new mxVertexHandler for the given mxCellState.
createEdgeHandlerHooks to create a new mxEdgeHandler for the given mxCellState.
createEdgeSegmentHandlerHooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.
createElbowEdgeHandlerHooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph events
addMouseListenerAdds a listener to the graph event dispatch loop.
removeMouseListenerRemoves the specified graph listener.
updateMouseEventSets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
getStateForEventReturns the state for the given touch event.
isEventIgnoredReturns true if the event should be ignored in fireMouseEvent.
isSyntheticEventIgnoredHook for ignoring synthetic mouse events after touchend in Firefox.
isEventSourceIgnoredReturns true if the event should be ignored in fireMouseEvent.
getEventStateReturns the mxCellState to be used when firing the mouse event for the given state.
fireMouseEventDispatches the given event in the graph event dispatch loop.
consumeMouseEventConsumes the given mxMouseEvent if it’s a touchStart event.
fireGestureEventDispatches a mxEvent.GESTURE event.
destroyDestroys the graph and all its resources.
mxCellOverlayExtends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.
Events
mxEvent.CLICKFires when the user clicks on the overlay.
Functions
mxCellOverlayConstructs a new overlay using the given image and tooltip.
Variables
imageHolds the mxImage to be used as the icon.
tooltipHolds the optional string to be used as the tooltip.
alignHolds the horizontal alignment for the overlay.
verticalAlignHolds the vertical alignment for the overlay.
offsetHolds the offset as an mxPoint.
cursorHolds the cursor for the overlay.
defaultOverlapDefines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
Functions
getBoundsReturns the bounds of the overlay for the given mxCellState as an mxRectangle.
toStringReturns the textual representation of the overlay to be used as the tooltip.
mxOutlineImplements an outline (aka overview) for a graph.
Functions
mxOutlineConstructs a new outline for the specified graph inside the given container.
sourceReference to the source mxGraph.
outlineReference to the mxGraph that renders the outline.
graphRenderHintRenderhint to be used for the outline graph.
Variables
enabledSpecifies if events are handled.
showViewportSpecifies a viewport rectangle should be shown.
borderBorder to be added at the bottom and right.
enabledSpecifies the size of the sizer handler.
labelsVisibleSpecifies if labels should be visible in the outline.
updateOnPanSpecifies if update should be called for mxEvent.PAN in the source graph.
sizerImageOptional mxImage to be used for the sizer.
minScaleMinimum scale to be used.
suspendedOptional boolean flag to suspend updates.
forceVmlHandlesSpecifies if VML should be used to render the handles in this control.
Functions
createGraphCreates the mxGraph used in the outline.
initInitializes the outline inside the given container.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
setZoomEnabledEnables or disables the zoom handling by showing or hiding the respective handle.
refreshInvokes update and revalidate the outline.
createSizerCreates the shape used as the sizer.
getSourceContainerSizeReturns the size of the source container.
getOutlineOffsetReturns the offset for drawing the outline graph.
getOutlineOffsetReturns the offset for drawing the outline graph.
updateUpdates the outline.
mouseDownHandles the event by starting a translation or zoom.
mouseMoveHandles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.
getTranslateForEventGets the translate for the given mouse event.
mouseUpHandles the event by applying the translation or zoom to <graph>.
destroyDestroy this outline and removes all listeners from source.
mxMultiplicityDefines invalid connections along with the error messages that they produce.
Functions
mxMultiplicityInstantiate class mxMultiplicity in order to describe allowed connections in a graph.
Variables
typeDefines the type of the source or target terminal.
attrOptional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.
valueOptional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.
sourceBoolean that specifies if the rule is applied to the source or target terminal of an edge.
minDefines the minimum number of connections for which this rule applies.
maxDefines the maximum number of connections for which this rule applies.
validNeighborsHolds an array of strings that specify the type of neighbor for which this rule applies.
validNeighborsAllowedBoolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.
countErrorHolds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.
typeErrorHolds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.
Functions
checkChecks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.
checkNeighborsChecks if there are any valid neighbours in validNeighbors.
checkTerminalChecks the given terminal cell and returns true if this rule applies.
checkTypeChecks the type of the given value.
mxLayoutManager
Events
mxEvent.LAYOUT_CELLSFires between begin- and endUpdate after all cells have been layouted in layoutCells.
Functions
mxLayoutManagerConstructs a new automatic layout for the given graph.
Variables
graphReference to the enclosing mxGraph.
bubblingSpecifies if the layout should bubble along the cell hierarchy.
enabledSpecifies if event handling is enabled.
updateHandlerHolds the function that handles the endUpdate event.
moveHandlerHolds the function that handles the move event.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isBubblingReturns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed.
setBubblingSets bubbling.
getGraphReturns the graph that this layout operates on.
setGraphSets the graph that the layouts operate on.
getLayoutReturns the layout to be executed for the given graph and parent.
beforeUndoCalled from the undoHandler.
executeLayoutExecutes the given layout on the given parent.
cellsMovedCalled from the moveHandler.
getCellsForEditReturns the cells to be layouted for the given sequence of changes.
getCellsForChangeExecutes all layouts which have been scheduled during the changes.
layoutCellsExecutes all layouts which have been scheduled during the changes.
executeLayoutExecutes the given layout on the given parent.
destroyRemoves all handlers from the graph and deletes the reference to it.
mxSwimlaneManagerManager for swimlanes and nested swimlanes that sets the size of newly added swimlanes to that of their siblings, and propagates changes to the size of a swimlane to its siblings, if <siblings> is true, and its ancestors, if <bubbling> is true.
Functions
mxSwimlaneManagerConstructs a new swimlane manager for the given graph.
Variables
graphReference to the enclosing mxGraph.
enabledSpecifies if event handling is enabled.
horizontalSpecifies the orientation of the swimlanes.
addEnabledSpecifies if newly added cells should be resized to match the size of their existing siblings.
resizeEnabledSpecifies if resizing of swimlanes should be handled.
moveHandlerHolds the function that handles the move event.
moveHandlerHolds the function that handles the move event.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isHorizontalReturns horizontal.
setHorizontalSets horizontal.
isAddEnabledReturns addEnabled.
setAddEnabledSets addEnabled.
isResizeEnabledReturns resizeEnabled.
setResizeEnabledSets resizeEnabled.
getGraphReturns the graph that this manager operates on.
setGraphSets the graph that the manager operates on.
isSwimlaneIgnoredReturns true if the given swimlane should be ignored.
isCellHorizontalReturns true if the given cell is horizontal.
cellsAddedCalled if any cells have been added.
swimlaneAddedUpdates the size of the given swimlane to match that of any existing siblings swimlanes.
cellsResizedCalled if any cells have been resizes.
resizeSwimlaneCalled from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if <bubbling> is true.
destroyRemoves all handlers from the graph and deletes the reference to it.
mxTemporaryCellStatesCreates a temporary set of cell states.
Variables
viewHolds the width of the rectangle.
oldStatesHolds the height of the rectangle.
oldBoundsHolds the height of the rectangle.
oldScaleHolds the height of the rectangle.
Functions
destroyReturns the top, left corner as a new mxPoint.
mxCellStatePreviewImplements a live preview for moving cells.
Functions
mxCellStatePreviewConstructs a move preview for the given graph.
Variables
graphReference to the enclosing mxGraph.
deltasReference to the enclosing mxGraph.
countContains the number of entries in the map.
Functions
isEmptyReturns true if this contains no entries.
moveState
show
translateState
revalidateState
addEdges
mxConnectionConstraintDefines an object that contains the constraints about how to connect one side of an edge to its terminal.
Functions
mxConnectionConstraintConstructs a new connection constraint for the given point and boolean arguments.
Variables
pointmxPoint that specifies the fixed location of the connection point.
perimeterBoolean that specifies if the point should be projected onto the perimeter of the terminal.
nameOptional string that specifies the name of the constraint.
dxOptional float that specifies the horizontal offset of the constraint.
dyOptional float that specifies the vertical offset of the constraint.
mxGraphHandlerGraph event handler that handles selection.
Functions
mxGraphHandlerConstructs an event handler that creates handles for the selection cells.
Variables
graphReference to the enclosing mxGraph.
maxCellsDefines the maximum number of cells to paint subhandles for.
enabledSpecifies if events are handled.
highlightEnabledSpecifies if drop targets under the mouse should be enabled.
cloneEnabledSpecifies if cloning by control-drag is enabled.
moveEnabledSpecifies if moving is enabled.
guidesEnabledSpecifies if other cells should be used for snapping the right, center or left side of the current selection.
guideHolds the mxGuide instance that is used for alignment.
currentDxStores the x-coordinate of the current mouse move.
currentDyStores the y-coordinate of the current mouse move.
updateCursorSpecifies if a move cursor should be shown if the mouse is over a movable cell.
selectEnabledSpecifies if selecting is enabled.
removeCellsFromParentSpecifies if cells may be moved out of their parents.
removeEmptyParentsIf empty parents should be removed from the model after all child cells have been moved out.
connectOnDropSpecifies if drop events are interpreted as new connections if no other drop action is defined.
scrollOnMoveSpecifies if the view should be scrolled so that a moved cell is visible.
minimumSizeSpecifies the minimum number of pixels for the width and height of a selection border.
previewColorSpecifies the color of the preview shape.
htmlPreviewSpecifies if the graph container should be used for preview.
shapeReference to the mxShape that represents the preview.
scaleGridSpecifies if the grid should be scaled.
rotationEnabledSpecifies if the bounding box should allow for rotation.
Functions
isEnabledReturns enabled.
setEnabledSets enabled.
isCloneEnabledReturns cloneEnabled.
setCloneEnabledSets cloneEnabled.
isMoveEnabledReturns moveEnabled.
setMoveEnabledSets moveEnabled.
isSelectEnabledReturns selectEnabled.
setSelectEnabledSets selectEnabled.
isRemoveCellsFromParentReturns removeCellsFromParent.
setRemoveCellsFromParentSets removeCellsFromParent.
getInitialCellForEventHook to return initial cell for the given event.
isDelayedSelectionHook to return true for delayed selections.
consumeMouseEventConsumes the given mouse event.
mouseDownHandles the event by selecing the given cell and creating a handle for it.
getGuideStatesCreates an array of cell states which should be used as guides.
getCellsReturns the cells to be modified by this handler.
getPreviewBoundsReturns the mxRectangle used as the preview bounds for moving the given cells.
getBoundingBoxReturns the union of the mxCellStates for the given array of mxCells.
createPreviewShapeCreates the shape used to draw the preview for the given bounds.
startStarts the handling of the mouse gesture.
useGuidesForEventReturns true if the guides should be used for the given mxMouseEvent.
snapSnaps the given vector to the grid and returns the given mxPoint instance.
getDeltaReturns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundLengthHook for rounding the unscaled vector.
mouseMoveHandles the event by highlighting possible drop targets and updating the preview.
updatePreviewShapeUpdates the bounds of the preview shape.
setHighlightColorSets the color of the rectangle used to highlight drop targets.
mouseUpHandles the event by applying the changes to the selection cells.
selectDelayedImplements the delayed selection for the given mouse event.
resetResets the state of this handler.
shouldRemoveCellsFromParentReturns true if the given cells should be removed from the parent for the specified mousereleased event.
moveCellsMoves the given cells by the specified amount.
moveCellsMoves the given cells by the specified amount.
destroyShapesDestroy the preview and highlight shapes.
destroyDestroys the handler and all its resources and DOM nodes.
mxPanningHandlerEvent handler that pans and creates popupmenus.
Functions
mxPanningHandlerConstructs an event handler that creates a mxPopupMenu and pans the graph.
Events
mxEvent.PAN_STARTFires when the panning handler changes its <active> state to true.
mxEvent.PANFires while handle is processing events.
mxEvent.PAN_ENDFires when the panning handler changes its <active> state to false.
Variables
graphReference to the enclosing mxGraph.
useLeftButtonForPanningSpecifies if panning should be active for the left mouse button.
usePopupTriggerSpecifies if mxEvent.isPopupTrigger should also be used for panning.
ignoreCellSpecifies if panning should be active even if there is a cell under the mousepointer.
previewEnabledSpecifies if the panning should be previewed.
useGridSpecifies if the panning steps should be aligned to the grid size.
panningEnabledSpecifies if panning should be enabled.
pinchEnabledSpecifies if pinch gestures should be handled as zoom.
maxScaleSpecifies the maximum scale.
minScaleSpecifies the minimum scale.
dxHolds the current horizontal offset.
dyHolds the current vertical offset.
startXHolds the x-coordinate of the start point.
startYHolds the y-coordinate of the start point.
Functions
isActiveReturns true if the handler is currently active.
isPanningEnabledReturns panningEnabled.
setPanningEnabledSets panningEnabled.
isPinchEnabledReturns pinchEnabled.
setPinchEnabledSets pinchEnabled.
isPanningTriggerReturns true if the given event is a panning trigger for the optional given cell.
isForcePanningEventReturns true if the given mxMouseEvent should start panning.
mouseDownHandles the event by initiating the panning.
startStarts panning at the given event.
consumePanningTriggerConsumes the given mxMouseEvent if it was a panning trigger in mouseDown.
mouseMoveHandles the event by updating the panning on the graph.
mouseUpHandles the event by setting the translation on the view or showing the popupmenu.
mouseUpHandles the event by setting the translation on the view or showing the popupmenu.
panGraphPans graph by the given amount.
destroyDestroys the handler and all its resources and DOM nodes.
mxPopupMenuHandlerEvent handler that creates popupmenus.
Functions
mxPopupMenuHandlerConstructs an event handler that creates a mxPopupMenu.
Variables
graphReference to the enclosing mxGraph.
selectOnPopupSpecifies if cells should be selected if a popupmenu is displayed for them.
clearSelectionOnBackgroundSpecifies if cells should be deselected if a popupmenu is displayed for the diagram background.
triggerXX-coordinate of the mouse down event.
triggerYY-coordinate of the mouse down event.
screenXScreen X-coordinate of the mouse down event.
screenYScreen Y-coordinate of the mouse down event.
Functions
initInitializes the shapes required for this vertex handler.
isSelectOnPopupHook for returning if a cell should be selected for a given mxMouseEvent.
mouseDownHandles the event by initiating the panning.
mouseMoveHandles the event by updating the panning on the graph.
mouseUpHandles the event by setting the translation on the view or showing the popupmenu.
getCellForPopupEventHook to return the cell for the mouse up popup trigger handling.
destroyDestroys the handler and all its resources and DOM nodes.
mxCellMarkerA helper class to process mouse locations and highlight cells.
Events
mxEvent.MARKFires after a cell has been marked or unmarked.
Functions
mxCellMarkerConstructs a new cell marker.
Variables
graphReference to the enclosing mxGraph.
enabledSpecifies if the marker is enabled.
hotspotSpecifies the portion of the width and height that should trigger a highlight.
hotspotEnabledSpecifies if the hotspot is enabled.
validColorHolds the valid marker color.
invalidColorHolds the invalid marker color.
currentColorHolds the current marker color.
validStateHolds the marked mxCellState if it is valid.
markedStateHolds the marked mxCellState.
Functions
setEnabledEnables or disables event handling.
isEnabledReturns true if events are handled.
setHotspotSets the hotspot.
getHotspotReturns the hotspot.
setHotspotEnabledSpecifies whether the hotspot should be used in intersects.
isHotspotEnabledReturns true if hotspot is used in intersects.
hasValidStateReturns true if validState is not null.
getValidStateReturns the validState.
getMarkedStateReturns the markedState.
resetResets the state of the cell marker.
processProcesses the given event and cell and marks the state returned by getState with the color returned by getMarkerColor.
setCurrentStateSets and marks the current valid state.
markCellMarks the given cell using the given color, or validColor if no color is specified.
markMarks the markedState and fires a mark event.
unmarkHides the marker and fires a mark event.
isValidStateReturns true if the given mxCellState is a valid state.
getMarkerColorReturns the valid- or invalidColor depending on the value of isValid.
getStateUses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.
getCellReturns the mxCell for the given event and cell.
getStateToMarkReturns the mxCellState to be marked for the given mxCellState under the mouse.
intersectsReturns true if the given coordinate pair intersects the given state.
destroyDestroys the handler and all its resources and DOM nodes.
mxSelectionCellsHandlerAn event handler that manages cell handlers and invokes their mouse event processing functions.
Events
mxEvent.ADDFires if a cell has been added to the selection.
mxEvent.REMOVEFires if a cell has been remove from the selection.
graphReference to the enclosing mxGraph.
enabledSpecifies if events are handled.
refreshHandlerKeeps a reference to an event listener for later removal.
maxHandlersDefines the maximum number of handlers to paint individually.
handlersmxDictionary that maps from cells to handlers.
isEnabledReturns enabled.
setEnabledSets enabled.
getHandlerReturns the handler for the given cell.
resetResets all handlers.
refreshReloads or updates all handlers.
isHandlerActiveReturns true if the given handler is active and should not be redrawn.
updateHandlerUpdates the handler for the given shape if one exists.
mouseDownRedirects the given event to the handlers.
mouseMoveRedirects the given event to the handlers.
mouseUpRedirects the given event to the handlers.
destroyDestroys the handler and all its resources and DOM nodes.
mxConnectionHandlerGraph event handler that creates new connections.
Events
mxEvent.STARTFires when a new connection is being created by the user.
mxEvent.CONNECTFires between begin- and endUpdate in connect.
mxEvent.RESETFires when the reset method is invoked.
mxConnectionHandlerConstructs an event handler that connects vertices using the specified factory method to create the new edges.
graphReference to the enclosing mxGraph.
factoryMethodFunction that is used for creating new edges.
moveIconFrontSpecifies if icons should be displayed inside the graph container instead of the overlay pane.
moveIconBackSpecifies if icons should be moved to the back of the overlay pane.
connectImagemxImage that is used to trigger the creation of a new connection.
targetConnectImageSpecifies if the connect icon should be centered on the target state while connections are being previewed.
enabledSpecifies if events are handled.
selectSpecifies if new edges should be selected.
createTargetSpecifies if createTargetVertex should be called if no target was under the mouse for the new connection.
markerHolds the <mxTerminalMarker> used for finding source and target cells.
constraintHandlerHolds the mxConstraintHandler used for drawing and highlighting constraints.
errorHolds the current validation error while connections are being created.
waypointsEnabledSpecifies if single clicks should add waypoints on the new edge.
ignoreMouseDownSpecifies if the connection handler should ignore the state of the mouse button when highlighting the source.
firstHolds the mxPoint where the mouseDown took place while the handler is active.
connectIconOffsetHolds the offset for connect icons during connection preview.
edgeStateOptional mxCellState that represents the preview edge while the handler is active.
changeHandlerHolds the change event listener for later removal.
drillHandlerHolds the drill event listener for later removal.
mouseDownCounterCounts the number of mouseDown events since the start.
movePreviewAwaySwitch to enable moving the preview away from the mousepointer.
outlineConnectSpecifies if connections to the outline of a highlighted target should be enabled.
livePreviewSpecifies if the actual shape of the edge state should be used for the preview.
cursorSpecifies the cursor to be used while the handler is active.
insertBeforeSourceSpecifies if new edges should be inserted before the source vertex in the cell hierarchy.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isInsertBeforeReturns insertBeforeSource for non-loops and false for loops.
isCreateTargetReturns createTarget.
setCreateTargetSets createTarget.
createShapeCreates the preview shape for new connections.
initInitializes the shapes required for this connection handler.
isConnectableCellReturns true if the given cell is connectable.
createMarkerCreates and returns the mxCellMarker used in marker.
startStarts a new connection for the given state and coordinates.
isConnectingReturns true if the source terminal has been clicked and a new connection is currently being previewed.
isValidSourceReturns mxGraph.isValidSource for the given source terminal.
isValidTargetReturns true.
validateConnectionReturns the error message or an empty string if the connection for the given source target pair is not valid.
getConnectImageHook to return the mxImage used for the connection icon of the given mxCellState.
isMoveIconToFrontForStateReturns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
createIconsCreates the array mxImageShapes that represent the connect icons for the given mxCellState.
redrawIconsRedraws the given array of mxImageShapes.
redrawIconsRedraws the given array of mxImageShapes.
destroyIconsDestroys the connect icons and resets the respective state.
isStartEventReturns true if the given mouse down event should start this handler.
mouseDownHandles the event by initiating a new connection.
isImmediateConnectSourceReturns true if a tap on the given source state should immediately start connecting.
createEdgeStateHook to return an mxCellState which may be used during the preview.
isOutlineConnectEventReturns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updateCurrentStateUpdates the current state for a given mouse move event by using the marker.
isCellEnabledReturns true if the given cell does not allow new connections to be created.
convertWaypointConverts the given point from screen coordinates to model coordinates.
snapToPreviewCalled to snap the given point to the current preview.
mouseMoveHandles the event by updating the preview edge or by highlighting a possible source or target terminal.
updateEdgeStateUpdates edgeState.
getTargetPerimeterPointReturns the perimeter point for the given target state.
getSourcePerimeterPointHook to update the icon position(s) based on a mouseOver event.
updateIconsHook to update the icon position(s) based on a mouseOver event.
isStopEventReturns true if the given mouse up event should stop this handler.
addWaypointAdds the waypoint for the given event to <waypoints>.
checkConstraintsReturns true if the connection for the given constraints is valid.
mouseUpHandles the event by inserting the new connection.
resetResets the state of this handler.
drawPreviewRedraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
getEdgeColorReturns the color used to draw the preview edge.
getEdgeColorReturns the color used to draw the preview edge.
getEdgeWidthReturns the width used to draw the preview edge.
connectConnects the given source and target using a new edge.
selectCellsSelects the given edge after adding a new connection.
insertEdgeCreates, inserts and returns the new edge for the given parameters.
createTargetVertexHook method for creating new vertices on the fly if no target was under the mouse.
getAlignmentToleranceReturns the tolerance for aligning new targets to sources.
createEdgeCreates and returns a new edge using factoryMethod if one exists.
destroyDestroys the handler and all its resources and DOM nodes.
mxConstraintHandlerHandles constraints on connection targets.
Functions
mxConstraintHandlerConstructs an new constraint handler.
Variables
pointImagemxImage to be used as the image for fixed connection points.
graphReference to the enclosing mxGraph.
enabledSpecifies if events are handled.
highlightColorSpecifies the color for the highlight.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
resetResets the state of this handler.
getToleranceReturns the tolerance to be used for intersecting connection points.
getImageForConstraintReturns the tolerance to be used for intersecting connection points.
isEventIgnoredReturns true if the given mxMouseEvent should be ignored in update.
isStateIgnoredReturns true if the given state should be ignored.
destroyIconsDestroys the <focusIcons> if they exist.
destroyFocusHighlightDestroys the <focusHighlight> if one exists.
isKeepFocusEventReturns true if the current focused state should not be changed for the given event.
getCellForEventReturns the cell for the given event.
updateUpdates the state of this handler based on the given mxMouseEvent.
redrawTransfers the focus to the given state as a source or target terminal.
setFocusTransfers the focus to the given state as a source or target terminal.
createHighlightShapeCreate the shape used to paint the highlight.
intersectsReturns true if the given icon intersects the given rectangle.
destroyDestroy this handler.
mxRubberbandEvent handler that selects rectangular regions.
Functions
mxRubberbandConstructs an event handler that selects rectangular regions in the graph using rubberband selection.
Variables
defaultOpacitySpecifies the default opacity to be used for the rubberband div.
enabledSpecifies if events are handled.
divHolds the DIV element which is currently visible.
sharedDivHolds the DIV element which is used to display the rubberband.
currentXHolds the value of the x argument in the last call to update.
currentYHolds the value of the y argument in the last call to update.
fadeOutOptional fade out effect.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isForceRubberbandEventReturns true if the given mxMouseEvent should start rubberband selection.
mouseDownHandles the event by initiating a rubberband selection.
startSets the start point for the rubberband selection.
mouseMoveHandles the event by updating therubberband selection.
createShapeCreates the rubberband selection shape.
isActiveReturns true if this handler is active.
mouseUpHandles the event by selecting the region of the rubberband using mxGraph.selectRegion.
executeResets the state of this handler and selects the current region for the given event.
resetResets the state of the rubberband selection.
updateSets currentX and currentY and calls repaint.
repaintComputes the bounding box and updates the style of the div.
destroyDestroys the handler and all its resources and DOM nodes.
mxHandleImplements a single custom handle for vertices.
Functions
mxHandleConstructs a new handle for the given state.
Variables
cursorSpecifies the cursor to be used for this handle.
imageSpecifies the mxImage to be used to render the handle.
imageSpecifies the mxImage to be used to render the handle.
Functions
getPositionHook for subclassers to return the current position of the handle.
setPositionHooks for subclassers to update the style in the <state>.
executeHook for subclassers to execute the handle.
copyStyleSets the cell style with the given name to the corresponding value in <state>.
processEventProcesses the given mxMouseEvent and invokes setPosition.
positionChangedCalled after setPosition has been called in processEvent.
getRotationReturns the rotation defined in the style of the cell.
getTotalRotationReturns the rotation from the style and the rotation from the direction of the cell.
initCreates and initializes the shapes required for this handle.
createShapeCreates and returns the shape for this handle.
initShapeInitializes <shape> and sets its cursor.
redrawRenders the shape for this handle.
isHtmlRequiredReturns true if this handle should be rendered in HTML.
rotatePointRotates the point by the given angle.
flipPointFlips the given point vertically and/or horizontally.
snapPointSnaps the given point to the grid if ignore is false.
setVisibleShows or hides this handle.
resetResets the state of this handle by setting its visibility to true.
destroyDestroys this handle.
mxVertexHandlerEvent handler for resizing cells.
Functions
mxVertexHandlerConstructs an event handler that allows to resize vertices and groups.
Variables
graphReference to the enclosing mxGraph.
stateReference to the mxCellState being modified.
singleSizerSpecifies if only one sizer handle at the bottom, right corner should be used.
indexHolds the index of the current handle.
allowHandleBoundsCheckSpecifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
handleImageOptional mxImage to be used as handles.
toleranceOptional tolerance for hit-detection in getHandleForEvent.
rotationEnabledSpecifies if a rotation handle should be visible.
parentHighlightEnabledSpecifies if the parent should be highlighted if a child cell is selected.
rotationRasterSpecifies if rotation steps should be “rasterized” depening on the distance to the handle.
rotationCursorSpecifies the cursor for the rotation handle.
livePreviewSpecifies if resize should change the cell in-place.
manageSizersSpecifies if sizers should be hidden and spaced if the vertex is small.
constrainGroupByChildrenSpecifies if the size of groups should be constrained by the children.
rotationHandleVSpacingVertical spacing for rotation icon.
horizontalOffsetThe horizontal offset for the handles.
verticalOffsetThe horizontal offset for the handles.
Functions
initInitializes the shapes required for this vertex handler.
isRotationHandleVisibleReturns true if the rotation handle should be showing.
isConstrainedEventReturns true if the aspect ratio if the cell should be maintained.
isCenteredEventReturns true if the center of the vertex should be maintained during the resize.
createCustomHandlesReturns an array of custom handles.
updateMinBoundsInitializes the shapes required for this vertex handler.
getSelectionBoundsReturns the mxRectangle that defines the bounds of the selection border.
createParentHighlightShapeCreates the shape used to draw the selection border.
createSelectionShapeCreates the shape used to draw the selection border.
getSelectionColorReturns mxConstants.VERTEX_SELECTION_COLOR.
getSelectionStrokeWidthReturns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
isSelectionDashedReturns <mxConstants.VERTEX_SELECTION_DASHED>.
createSizerCreates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
isSizerVisibleReturns true if the sizer for the given index is visible.
createSizerShapeCreates the shape used for the sizer handle for the specified bounds an index.
createBoundsHelper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.
getHandleForEventReturns the index of the handle for the given event.
isCustomHandleEventReturns true if the given event allows custom handles to be changed.
mouseDownHandles the event if a handle has been clicked.
isLivePreviewBorderCalled if livePreview is enabled to check if a border should be painted.
startStarts the handling of the mouse gesture.
hideHandlesShortcut to hideSizers.
hideSizersHides all sizers except.
checkToleranceChecks if the coordinates for the given event are within the mxGraph.tolerance.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundAngleHook for rounding the angle.
roundLengthHook for rounding the unscaled width or height.
mouseMoveHandles the event by updating the preview.
rotateVertexRotates the vertex.
rotateVertexRotates the vertex.
rotateVertexRotates the vertex.
updateLivePreviewRepaints the live preview.
mouseUpHandles the event by applying the changes to the geometry.
rotateCellRotates the given cell to the given rotation.
rotateClickHook for subclassers to implement a single click on the rotation handle.
rotateCellRotates the given cell and its children by the given angle in degrees.
resetResets the state of this handler.
resizeCellUses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
moveChildrenMoves the children of the given cell by the given vector.
unionReturns the union of the given bounds and location for the specified handle index.
redrawRedraws the handles and the preview.
redrawHandlesRedraws the handles.
getRotationHandlePositionReturns an mxPoint that defines the rotation handle position.
updateParentHighlightUpdates the highlight of the parent if parentHighlightEnabled is true.
drawPreviewRedraws the preview.
destroyDestroys the handler and all its resources and DOM nodes.
mxEdgeHandlerGraph event handler that reconnects edges and modifies control points and the edge label location.
Functions
mxEdgeHandlerConstructs an edge handler for the specified mxCellState.
Variables
graphReference to the enclosing mxGraph.
stateReference to the mxCellState being modified.
markerHolds the <mxTerminalMarker> which is used for highlighting terminals.
constraintHandlerHolds the mxConstraintHandler used for drawing and highlighting constraints.
errorHolds the current validation error while a connection is being changed.
shapeHolds the mxShape that represents the preview edge.
bendsHolds the mxShapes that represent the points.
labelShapeHolds the mxShape that represents the label position.
cloneEnabledSpecifies if cloning by control-drag is enabled.
addEnabledSpecifies if adding bends by shift-click is enabled.
removeEnabledSpecifies if removing bends by shift-click is enabled.
dblClickRemoveEnabledSpecifies if removing bends by double click is enabled.
mergeRemoveEnabledSpecifies if removing bends by dropping them on other bends is enabled.
straightRemoveEnabledSpecifies if removing bends by creating straight segments should be enabled.
virtualBendsEnabledSpecifies if virtual bends should be added in the center of each segments.
virtualBendOpacityOpacity to be used for virtual bends (see virtualBendsEnabled).
parentHighlightEnabledSpecifies if the parent should be highlighted if a child cell is selected.
preferHtmlSpecifies if bends should be added to the graph container.
allowHandleBoundsCheckSpecifies if the bounds of handles should be used for hit-detection in IE Default is true.
snapToTerminalsSpecifies if waypoints should snap to the routing centers of terminals.
handleImageOptional mxImage to be used as handles.
toleranceOptional tolerance for hit-detection in getHandleForEvent.
outlineConnectSpecifies if connections to the outline of a highlighted target should be enabled.
manageLabelHandleSpecifies if the label handle should be moved if it intersects with another handle.
Functions
initInitializes the shapes required for this edge handler.
createCustomHandlesReturns an array of custom handles.
isVirtualBendsEnabledReturns true if virtual bends should be added.
isAddPointEventReturns true if the given event is a trigger to add a new point.
isRemovePointEventReturns true if the given event is a trigger to remove a point.
getSelectionPointsReturns the list of points that defines the selection stroke.
createSelectionShapeCreates the shape used to draw the selection border.
createSelectionShapeCreates the shape used to draw the selection border.
getSelectionColorReturns mxConstants.EDGE_SELECTION_COLOR.
getSelectionStrokeWidthReturns mxConstants.EDGE_SELECTION_STROKEWIDTH.
isSelectionDashedReturns <mxConstants.EDGE_SELECTION_DASHED>.
isConnectableCellReturns true if the given cell is connectable.
getCellAtCreates and returns the mxCellMarker used in marker.
createMarkerCreates and returns the mxCellMarker used in marker.
validateConnectionReturns the error message or an empty string if the connection for the given source, target pair is not valid.
createBendsCreates and returns the bends used for modifying the edge.
createVirtualBendsCreates and returns the bends used for modifying the edge.
isHandleEnabledCreates the shape used to display the given bend.
isHandleVisibleReturns true if the handle at the given index is visible.
createHandleShapeCreates the shape used to display the given bend.
createLabelHandleShapeCreates the shape used to display the the label handle.
initBendHelper method to initialize the given bend.
getHandleForEventReturns the index of the handle for the given event.
isAddVirtualBendEventReturns true if the given event allows virtual bends to be added.
isCustomHandleEventReturns true if the given event allows custom handles to be changed.
mouseDownHandles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
startStarts the handling of the mouse gesture.
clonePreviewStateReturns a clone of the current preview state for the given point and terminal.
getSnapToTerminalToleranceReturns the tolerance for the guides.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundLengthHook for rounding the unscaled width or height.
isSnapToTerminalsEventReturns true if snapToTerminals is true and if alt is not pressed.
getPointForEventReturns the point for the given event.
getPreviewTerminalStateUpdates the given preview state taking into account the state of the constraint handler.
getPreviewPointsUpdates the given preview state taking into account the state of the constraint handler.
isOutlineConnectEventReturns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updatePreviewStateUpdates the given preview state taking into account the state of the constraint handler.
mouseMoveHandles the event by updating the preview.
mouseUpHandles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
resetResets the state of this handler.
setPreviewColorSets the color of the preview to the given value.
convertPointConverts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
moveLabelChanges the coordinates for the label of the given edge.
connectChanges the terminal or terminal point of the given edge in the graph model.
changeTerminalPointChanges the terminal point of the given edge.
changePointsChanges the control points of the given edge in the graph model.
addPointAdds a control point for the given state and event.
addPointAtAdds a control point at the given point.
removePointRemoves the control point at the given index from the given state.
getHandleFillColorReturns the fillcolor for the handle at the given index.
redrawRedraws the preview, and the bends- and label control points.
redrawHandlesRedraws the handles.
hideHandlesShortcut to <hideSizers>.
redrawInnerBendsUpdates and redraws the inner bends.
checkLabelHandleChecks if the label handle intersects the given bounds and moves it if it intersects.
drawPreviewRedraws the preview.
refreshRefreshes the bends of this handler.
destroyBendsDestroys all elements in bends.
destroyDestroys the handler and all its resources and DOM nodes.
mxElbowEdgeHandlerGraph event handler that reconnects edges and modifies control points and the edge label location.
Functions
mxEdgeHandlerConstructs an edge handler for the specified mxCellState.
Variables
doubleClickOrientationResourceSpecifies the resource key for the tooltip to be displayed on the single control point for routed edges.
Functions
createBendsOverrides mxEdgeHandler.createBends to create custom bends.
createVirtualBendCreates a virtual bend that supports double clicking and calls mxGraph.flipEdge.
getCursorForBendReturns the cursor to be used for the bend.
getTooltipForNodeReturns the tooltip for the given node.
convertPointConverts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
redrawInnerBendsUpdates and redraws the inner bends.
getCurrentPointsReturns the current absolute points.
getPreviewPointsUpdates the given preview state taking into account the state of the constraint handler.
updatePreviewStateOverridden to perform optimization of the edge style result.
getTooltipForNodeReturns no tooltips.
createBendsAdds custom bends for the center of each segment.
createBendsAdds custom bends for the center of each segment.
redrawOverridden to invoke <refresh> before the redraw.
redrawInnerBendsUpdates the position of the custom bends.
mxKeyHandlerEvent handler that listens to keystroke events.
Functions
mxKeyHandlerConstructs an event handler that executes functions bound to specific keystrokes.
Variables
graphReference to the mxGraph associated with this handler.
targetReference to the target DOM, that is, the DOM node where the key event listeners are installed.
normalKeysMaps from keycodes to functions for non-pressed control keys.
shiftKeysMaps from keycodes to functions for pressed shift keys.
controlKeysMaps from keycodes to functions for pressed control keys.
controlShiftKeysMaps from keycodes to functions for pressed control and shift keys.
enabledSpecifies if events are handled.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling by updating enabled.
bindKeyBinds the specified keycode to the given function.
bindShiftKeyBinds the specified keycode to the given function.
bindControlKeyBinds the specified keycode to the given function.
bindControlShiftKeyBinds the specified keycode to the given function.
isControlDownReturns true if the control key is pressed.
getFunctionReturns the function associated with the given key event or null if no function is associated with the given event.
isGraphEventReturns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the <mxGraph.container>, or the mxGraph.cellEditor of the graph.
keyDownHandles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
isEnabledForEventReturns true if the given event should be handled.
isEventIgnoredReturns true if the given keystroke should be ignored.
escapeHook to process ESCAPE keystrokes.
destroyDestroys the handler and all its references into the DOM.
mxTooltipHandlerGraph event handler that displays tooltips.
Functions
mxTooltipHandlerConstructs an event handler that displays tooltips with the specified delay (in milliseconds).
Variables
zIndexSpecifies the zIndex for the tooltip and its shadow.
graphReference to the enclosing mxGraph.
delayDelay to show the tooltip in milliseconds.
ignoreTouchEventsSpecifies if touch and pen events should be ignored.
hideOnHoverSpecifies if the tooltip should be hidden if the mouse is moved over the current cell.
destroyedTrue if this handler was destroyed using destroy.
enabledSpecifies if events are handled.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isHideOnHoverReturns hideOnHover.
setHideOnHoverSets hideOnHover.
initInitializes the DOM nodes required for this tooltip handler.
getStateForEventReturns the mxCellState to be used for showing a tooltip for this event.
mouseDownHandles the event by initiating a rubberband selection.
mouseMoveHandles the event by updating the rubberband selection.
mouseUpHandles the event by resetting the tooltip timer or hiding the existing tooltip.
resetTimerResets the timer.
resetResets and/or restarts the timer to trigger the display of the tooltip.
hideHides the tooltip and resets the timer.
hideTooltipHides the tooltip.
showShows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).
destroyDestroys the handler and all its resources and DOM nodes.
mxCellTrackerEvent handler that highlights cells.
Functions
mxCellTrackerConstructs an event handler that highlights cells.
mouseDownIgnores the event.
mouseMoveHandles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.
mouseUpHandles the event by reseting the highlight.
destroyDestroys the object and all its resources and DOM nodes.
mxCellHighlightA helper class to highlight cells.
Functions
mxCellHighlightConstructs a cell highlight.
Variables
keepOnTopSpecifies if the highlights should appear on top of everything else in the overlay pane.
graphReference to the enclosing mxGraph.
stateReference to the mxCellState.
spacingSpecifies the spacing between the highlight for vertices and the vertex.
resetHandlerHolds the handler that automatically invokes reset if the highlight should be hidden.
Functions
setHighlightColorSets the color of the rectangle used to highlight drop targets.
drawHighlightCreates and returns the highlight shape for the given state.
createShapeCreates and returns the highlight shape for the given state.
repaintUpdates the highlight after a change of the model or view.
repaintUpdates the highlight after a change of the model or view.
hideResets the state of the cell marker.
markMarks the <markedState> and fires a mark event.
isHighlightAtReturns true if this highlight is at the given position.
destroyDestroys the handler and all its resources and DOM nodes.
mxDefaultKeyHandlerBinds keycodes to actionnames in an editor.
Functions
mxDefaultKeyHandlerConstructs a new default key handler for the mxEditor.graph in the given mxEditor.
Variables
editorReference to the enclosing mxEditor.
handlerHolds the mxKeyHandler for key event handling.
Functions
bindActionBinds the specified keycode to the given action in editor.
destroyDestroys the handler associated with this object.
mxDefaultPopupMenuCreates popupmenus for mouse events.
Functions
mxDefaultPopupMenuConstructs a new popupmenu-factory based on given configuration.
Variables
imageBasePathBase path for all icon attributes in the config.
configXML node used as the description of new menu items.
Functions
createMenuThis function is called from mxEditor to add items to the given menu based on config.
addItemsRecursively adds the given items and all of its children into the given menu.
addActionHelper method to bind an action to a new menu item.
createConditionsEvaluates the default conditions for the given context.
mxDefaultToolbarToolbar for the editor.
Functions
mxDefaultToolbarConstructs a new toolbar for the given container and editor.
Variables
editorReference to the enclosing mxEditor.
toolbarHolds the internal mxToolbar.
resetHandlerReference to the function used to reset the toolbar.
spacingDefines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell.
connectOnDropSpecifies if elements should be connected if new cells are dropped onto connectable elements.
initConstructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar.
Functions
addItemAdds a new item that executes the given action in editor.
addSeparatorAdds a vertical separator using the optional icon.
addComboHelper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.
addActionComboHelper method to invoke <mxToolbar.addActionCombo> on toolbar using the given title and return the resulting DOM node.
addActionOptionBinds the given action to a option with the specified label in the given combo.
addOptionHelper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.
addModeCreates an item for selecting the given mode in the editor’s graph.
addPrototypeCreates an item for inserting a clone of the specified prototype cell into the editor’s graph.
dropHandles a drop from a toolbar item to the graph.
insertHandles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.
connectHandles a drop by connecting the given vertex to the given source cell.
installDropHandlerMakes the given img draggable using the given function for handling a drop event.
destroyDestroys the toolbar associated with this object and removes all installed listeners.
mxEditorExtends mxEventSource to implement a application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg.
onInitCalled from within the constructor.
mxgraph=seenSet when the editor is started.
mxEvent.OPENFires after a file was opened in open.
mxEvent.SAVEFires after the current file was saved in save.
mxEvent.POSTFires if a successful response was received in postDiagram.
mxEvent.ROOTFires when the current root has changed, or when the title of the current root has changed.
mxEvent.BEFORE_ADD_VERTEXFires before a vertex is added in addVertex.
mxEvent.ADD_VERTEXFires between begin- and endUpdate in addVertex.
mxEvent.AFTER_ADD_VERTEXFires after a vertex was inserted and selected in addVertex.
mxEvent.ESCAPEFires when the escape key is pressed.
mxEditorConstructs a new editor.
Controls and Handlers
askZoomResourceSpecifies the resource key for the zoom dialog.
lastSavedResourceSpecifies the resource key for the last saved info.
currentFileResourceSpecifies the resource key for the current file info.
propertiesResourceSpecifies the resource key for the properties window title.
tasksResourceSpecifies the resource key for the tasks window title.
helpResourceSpecifies the resource key for the help window title.
outlineResourceSpecifies the resource key for the outline window title.
outlineReference to the mxWindow that contains the outline.
graphHolds a mxGraph for displaying the diagram.
graphRenderHintHolds the render hint used for creating the graph in setGraphContainer.
toolbarHolds a mxDefaultToolbar for displaying the toolbar.
statusDOM container that holds the statusbar.
popupHandlerHolds a mxDefaultPopupMenu for displaying popupmenus.
undoManagerHolds an mxUndoManager for the command history.
keyHandlerHolds a mxDefaultKeyHandler for handling keyboard events.
Actions and Options
actionsMaps from actionnames to actions, which are functions taking the editor and the cell as arguments.
dblClickActionSpecifies the name of the action to be executed when a cell is double clicked.
swimlaneRequiredSpecifies if new cells must be inserted into an existing swimlane.
disableContextMenuSpecifies if the context menu should be disabled in the graph container.
Templates
insertFunctionSpecifies the function to be used for inserting new cells into the graph.
forcedInsertingSpecifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected.
templatesMaps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
defaultEdgePrototype edge cell that is used for creating new edges.
defaultEdgeStyleSpecifies the edge style to be returned in getEdgeStyle.
defaultGroupPrototype group cell that is used for creating new groups.
groupBorderSizeDefault size for the border of new groups.
Backend Integration
filenameContains the URL of the last opened file as a string.
lineFeedCharacter to be used for encoding linefeeds in save.
postParameterNameSpecifies if the name of the post parameter that contains the diagram data in a post request to the server.
escapePostDataSpecifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
urlPostSpecifies the URL to be used for posting the diagram to a backend in save.
urlImageSpecifies the URL to be used for creating a bitmap of the graph in the image action.
Autolayout
horizontalFlowSpecifies the direction of the flow in the diagram.
layoutDiagramSpecifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.
swimlaneSpacingSpecifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
maintainSwimlanesSpecifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
layoutSwimlanesSpecifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
Attribute Cycling
cycleAttributeValuesSpecifies the attribute values to be cycled when inserting new swimlanes.
cycleAttributeIndexIndex of the last consumed attribute index.
cycleAttributeNameName of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
Windows
tasksHolds the mxWindow created in showTasks.
tasksWindowImageIcon for the tasks window.
tasksTopSpecifies the top coordinate of the tasks window in pixels.
helpHolds the mxWindow created in showHelp.
helpWindowImageIcon for the help window.
urlHelpSpecifies the URL to be used for the contents of the Online Help window.
helpWidthSpecifies the width of the help window in pixels.
helpHeightSpecifies the height of the help window in pixels.
propertiesWidthSpecifies the width of the properties window in pixels.
propertiesHeightSpecifies the height of the properties window in pixels.
movePropertiesDialogSpecifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
validatingSpecifies if mxGraph.validateGraph should automatically be invoked after each change.
modifiedTrue if the graph has been modified since it was last saved.
isModifiedReturns modified.
setModifiedSets modified to the specified boolean value.
addActionsAdds the built-in actions to the editor instance.
configureConfigures the editor using the specified node.
resetFirstTimeResets the cookie that is used to remember if the editor has already been used.
resetHistoryResets the command history, modified state and counters.
addActionBinds the specified actionname to the specified function.
executeExecutes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
addTemplateAdds the specified template under the given name in templates.
getTemplateReturns the template for the given name.
createGraphCreates the graph for the editor.
createSwimlaneManagerSets the graph’s container using mxGraph.init.
createLayoutManagerCreates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
setGraphContainerSets the graph’s container using mxGraph.init.
installDblClickHandlerOverrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
installUndoHandlerAdds the undoManager to the graph model and the view.
installDrillHandlerInstalls listeners for dispatching the <root> event.
installChangeHandlerInstalls the listeners required to automatically validate the graph.
installInsertHandlerInstalls the handler for invoking insertFunction if one is defined.
createDiagramLayoutCreates the layout instance used to layout the swimlanes in the diagram.
createSwimlaneLayoutCreates the layout instance used to layout the children of each swimlane.
createToolbarCreates the toolbar with no container.
setToolbarContainerInitializes the toolbar for the given container.
setStatusContainerCreates the status using the specified container.
setStatusDisplay the specified message in the status bar.
setTitleContainerCreates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
treeLayoutExecutes a vertical or horizontal compact tree layout using the specified cell as an argument.
getTitleReturns the string value for the current root of the diagram.
getRootTitleReturns the string value of the root cell in mxGraph.model.
undoUndo the last change in graph.
redoRedo the last change in graph.
groupCellsInvokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
createGroupCreates and returns a clone of defaultGroup to be used as a new group cell in <group>.
openOpens the specified file synchronously and parses it using readGraphModel.
readGraphModelReads the specified XML node into the existing graph model and resets the command history and modified state.
savePosts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
postDiagramHook for subclassers to override the posting of a diagram represented by the given node to the given URL.
writeGraphModelHook to create the string representation of the diagram.
getUrlPostReturns the URL to post the diagram to.
getUrlImageReturns the URL to create the image with.
swapStylesSwaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
showPropertiesCreates and shows the properties dialog for the given cell.
isPropertiesVisibleReturns true if the properties dialog is currently visible.
createPropertiesCreates and returns the DOM node that represents the contents of the properties dialog for the given cell.
hidePropertiesHides the properties dialog.
showTasksShows the tasks window.
refreshTasksUpdates the contents of the tasks window using createTasks.
createTasksUpdates the contents of the given DOM node to display the tasks associated with the current editor state.
showHelpShows the help window.
showOutlineShows the outline window.
setModePuts the graph into the specified mode.
createPopupMenuUses popupHandler to create the menu in the graph’s panning handler.
createEdgeUses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
getEdgeStyleReturns a string identifying the style of new edges.
consumeCycleAttributeReturns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
cycleAttributeUses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
addVertexAdds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
destroyRemoves the editor and all its associated resources.
mxCodecRegistrySingleton class that acts as a global registry for codecs.
Variables
codecsMaps from constructor names to codecs.
aliasesMaps from classnames to codecnames.
Functions
registerRegisters a new codec and associates the name of the template constructor in the codec with the codec object.
addAliasAdds an alias for mapping a classname to a codecname.
getCodecReturns a codec that handles objects that are constructed using the given constructor.
mxCodecXML codec for JavaScript object graphs.
Functions
mxCodecConstructs an XML encoder/decoder for the specified owner document.
Variables
documentThe owner document of the codec.
objectsMaps from IDs to objects.
elementsLookup table for resolving IDs to elements.
encodeDefaultsSpecifies if default values should be encoded.
Functions
putObjectAssoiates the given object with the given ID and returns the given object.
getObjectReturns the decoded object for the element with the specified ID in document.
lookupHook for subclassers to implement a custom lookup mechanism for cell IDs.
getElementByIdReturns the element with the given ID from document.
updateElementsReturns the element with the given ID from document.
addElementAdds the given element to elements if it has an ID.
getIdReturns the ID of the specified object.
referenceHook for subclassers to implement a custom method for retrieving IDs from objects.
encodeEncodes the specified object and returns the resulting XML node.
decodeDecodes the given XML node.
encodeCellEncoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg.
isCellCodecReturns true if the given codec is a cell codec.
decodeCellDecodes cells that have been encoded using inversion, ie.
insertIntoGraphInserts the given cell into its parent and terminal cells.
setAttributeSets the attribute on the specified node to value.
mxObjectCodecGeneric codec for JavaScript objects that implements a mapping between JavaScript objects and XML nodes that maps each field or element to an attribute or child node, and vice versa.
Functions
mxObjectCodecConstructs a new codec for the specified template object.
Variables
allowEvalStatic global switch that specifies if expressions in arrays are allowed.
templateHolds the template object associated with this codec.
excludeArray containing the variable names that should be ignored by the codec.
idrefsArray containing the variable names that should be turned into or converted from references.
mappingMaps from from fieldnames to XML attribute names.
reverseMaps from from XML attribute names to fieldnames.
Functions
getNameReturns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded.
cloneTemplateReturns a new instance of the template for this codec.
getFieldNameReturns the fieldname for the given attributename.
getAttributeNameReturns the attributename for the given fieldname.
isExcludedReturns true if the given attribute is to be ignored by the codec.
isReferenceReturns true if the given fieldname is to be treated as a textual reference (ID).
encodeEncodes the specified object and returns a node representing then given object.
encodeObjectEncodes the value of each member in then given obj into the given node using encodeValue.
encodeValueConverts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.
writeAttributeWrites the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.
writePrimitiveAttributeWrites the given value as an attribute of the given node.
writeComplexAttributeWrites the given value as a child node of the given node.
convertAttributeToXmlConverts true to “1” and false to “0” is isBooleanAttribute returns true.
isBooleanAttributeReturns true if the given object attribute is a boolean value.
convertAttributeFromXmlConverts booleans and numeric values to the respective types.
isNumericAttributeReturns true if the given XML attribute is or should be a numeric value.
beforeEncodeHook for subclassers to pre-process the object before encoding.
afterEncodeHook for subclassers to post-process the node for the given object after encoding and return the post-processed node.
decodeParses the given node into the object or returns a new object representing the given node.
decodeNodeCalls decodeAttributes and decodeChildren for the given node.
decodeAttributesDecodes all attributes of the given node using decodeAttribute.
isIgnoredAttributeReturns true if the given attribute should be ignored.
decodeAttributeReads the given attribute into the specified object.
decodeChildrenDecodes all children of the given node using decodeChild.
decodeChildReads the specified child into the given object.
getFieldTemplateReturns the template instance for the given field.
addObjectValueSets the decoded child node as a value of the given object.
processIncludeReturns true if the given node is an include directive and executes the include by decoding the XML document.
beforeDecodeHook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode.
afterDecodeHook for subclassers to post-process the object after decoding.
mxCellCodecCodec for mxCells.
Functions
isCellCodecReturns true since this is a cell codec.
isExcludedExcludes user objects that are XML nodes.
afterEncodeEncodes an mxCell and wraps the XML up inside the XML of the user object (inversion).
beforeDecodeDecodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).
mxModelCodecCodec for mxGraphModels.
Functions
encodeObjectEncodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec.
decodeChildOverrides decode child to handle special child nodes.
decodeRootReads the cells into the graph model.
mxRootChangeCodecCodec for mxRootChanges.
Functions
onEncodeEncodes the child recursively.
beforeDecodeDecodes the optional children as cells using the respective decoder.
afterDecodeRestores the state by assigning the previous value.
mxChildChangeCodecCodec for mxChildChanges.
Functions
isReferenceReturns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.
isExcludedExcludes references to parent or previous if not in the model.
afterEncodeEncodes the child recusively and adds the result to the given node.
beforeDecodeDecodes the any child nodes as using the respective codec from the registry.
afterDecodeRestores object state in the child change.
mxTerminalChangeCodecCodec for mxTerminalChanges.
Functions
afterDecodeRestores the state by assigning the previous value.
mxGenericChangeCodecCodec for mxValueChanges, mxStyleChanges, mxGeometryChanges, mxCollapseChanges and mxVisibleChanges.
Functions
mxGenericChangeCodecFactory function that creates a mxObjectCodec for the specified change and fieldname.
afterDecodeRestores the state by assigning the previous value.
mxGraphCodecCodec for mxGraphs.
mxGraphViewCodecCustom encoder for mxGraphViews.
Functions
encodeEncodes the given mxGraphView using encodeCell starting at the model’s root.
encodeCellRecursively encodes the specifed cell.
mxStylesheetCodecCodec for mxStylesheets.
Functions
encodeEncodes a stylesheet.
getStringValueReturns the string for encoding the given value.
decodeReads a sequence of the following child nodes and attributes:
Variables
allowEvalStatic global switch that specifies if the use of eval is allowed for evaluating text content.
mxDefaultKeyHandlerCodecCustom codec for configuring mxDefaultKeyHandlers.
Functions
encodeReturns null.
decodeReads a sequence of the following child nodes and attributes:
mxDefaultToolbarCodecCustom codec for configuring mxDefaultToolbars.
Functions
encodeReturns null.
decodeReads a sequence of the following child nodes and attributes:
Variables
allowEvalStatic global switch that specifies if the use of eval is allowed for evaluating text content.
mxDefaultPopupMenuCodecCustom codec for configuring mxDefaultPopupMenus.
Functions
encodeReturns null.
decodeUses the given node as the config for mxDefaultPopupMenu.
mxEditorCodecCodec for mxEditors.
Functions
beforeDecodeDecodes the ui-part of the configuration node by reading a sequence of the following child nodes and attributes and passes the control to the default decoding mechanism:
decodeChildOverrides decode child to handle special child nodes.
decodeTemplatesDecodes the cells from the given node as templates.
decodeTemplatesDecodes the cells from the given node as templates.

Variables

VERSION

Contains the current version of the mxGraph library.  The strings that communicate versions of mxGraph use the following format.

versionMajor.versionMinor.buildNumber.revisionNumber

Current version is 4.0.4.

IS_IE

IS_IE: navigator.userAgent.indexOf('MSIE') >

True if the current browser is Internet Explorer 10 or below.  Use mxClient.IS_IE11 to detect IE 11.

IS_IE6

IS_IE6: navigator.userAgent.indexOf('MSIE 6') >

True if the current browser is Internet Explorer 6.x.

IS_IE11

True if the current browser is Internet Explorer 11.x.

IS_EDGE

True if the current browser is Microsoft Edge.

IS_QUIRKS

IS_QUIRKS: navigator.userAgent.indexOf('MSIE') >

True if the current browser is Internet Explorer and it is in quirks mode.

IS_EM

IS_EM: 'spellcheck' in document.createElement(
   'textarea'
) && document.documentMode

True if the browser is IE11 in enterprise mode (IE8 standards mode).

VML_PREFIX

Prefix for VML namespace in node names.  Default is ‘v’.

OFFICE_PREFIX

Prefix for VML office namespace in node names.  Default is ‘o’.

IS_NS

IS_NS: navigator.userAgent.indexOf('Mozilla/') >

True if the current browser is Netscape (including Firefox).

IS_OP

IS_OP: navigator.userAgent.indexOf('Opera/') >

True if the current browser is Opera.

IS_OT

IS_OT: navigator.userAgent.indexOf('Presto/') >

True if -o-transform is available as a CSS style, ie for Opera browsers based on a Presto engine with version 2.5 or later.

IS_SF

IS_SF: navigator.userAgent.indexOf('AppleWebKit/') >

True if the current browser is Safari.

IS_IOS

Returns true if the user agent is an iPad, iPhone or iPod.

IS_GC

IS_GC: navigator.userAgent.indexOf('Chrome/') >

True if the current browser is Google Chrome.

IS_CHROMEAPP

IS_CHROMEAPP: window.chrome !

True if the this is running inside a Chrome App.

IS_FF

IS_FF: navigator.userAgent.indexOf('Firefox/') >

True if the current browser is Firefox.

IS_MT

True if -moz-transform is available as a CSS style.  This is the case for all Firefox-based browsers newer than or equal 3, such as Camino, Iceweasel, Seamonkey and Iceape.

IS_VML

IS_VML: navigator.appName.toUpperCase()

True if the browser supports VML.

IS_SVG

IS_SVG: navigator.appName.toUpperCase() !

True if the browser supports SVG.

NO_FO

NO_FO: !document.createElementNS || document.createElementNS(
   'http://www.w3.org/2000/svg',
   'foreignObject'
) !

True if foreignObject support is not available.  This is the case for Opera, older SVG-based browsers and all versions of IE.

IS_WIN

True if the client is a Windows.

IS_MAC

True if the client is a Mac.

IS_CHROMEOS

True if the client is a Chrome OS.

IS_TOUCH

True if this device supports touchstart/-move/-end events (Apple iOS, Android, Chromebook and Chrome Browser on touch-enabled devices).

IS_POINTER

IS_POINTER: window.PointerEvent !

True if this device supports Microsoft pointer events (always false on Macs).

IS_LOCAL

True if the documents location does not start with http:// or https://.

defaultBundles

Contains the base names of the default bundles if mxLoadResources is false.

Functions

isBrowserSupported

isBrowserSupported: function()

Returns true if the current browser is supported, that is, if mxClient.IS_VML or mxClient.IS_SVG is true.

Example

if (!mxClient.isBrowserSupported())
{
  mxUtils.error('Browser is not supported!', 200, false);
}

link

link: function(rel,
href,
doc,
id)

Adds a link node to the head of the document.  Use this to add a stylesheet to the page as follows:

mxClient.link('stylesheet', filename);

where filename is the (relative) URL of the stylesheet.  The charset is hardcoded to ISO-8859-1 and the type is text/css.

Parameters

relString that represents the rel attribute of the link node.
hrefString that represents the href attribute of the link node.
docOptional parent document of the link node.
idunique id for the link element to check if it already exists

loadResources

loadResources: function(fn,
lan)

Helper method to load the default bundles if mxLoadResources is false.

Parameters

fnFunction to call after all resources have been loaded.
lanOptional string to pass to mxResources.add.

include

include: function(src)

Dynamically adds a script node to the document header.

In production environments, the includes are resolved in the mxClient.js file to reduce the number of requests required for client startup.  This function should only be used in development environments, but not in production systems.

Variables

mxLoadResources

Optional global config variable to toggle loading of the two resource files in mxGraph and mxEditor.  Default is true.  NOTE: This is a global variable, not a variable of mxClient.  If this is false, you can use mxClient.loadResources with its callback to load the default bundles asynchronously.

<script type="text/javascript">
     var mxLoadResources = false;
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

mxForceIncludes

Optional global config variable to force loading the JavaScript files in development mode.  Default is undefined.  NOTE: This is a global variable, not a variable of mxClient.

<script type="text/javascript">
     var mxLoadResources = true;
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

mxResourceExtension

Optional global config variable to specify the extension of resource files.  Default is true.  NOTE: This is a global variable, not a variable of mxClient.

<script type="text/javascript">
     var mxResourceExtension = '.txt';
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

mxLoadStylesheets

Optional global config variable to toggle loading of the CSS files when the library is initialized.  Default is true.  NOTE: This is a global variable, not a variable of mxClient.

<script type="text/javascript">
     var mxLoadStylesheets = false;
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

basePath

Basepath for all URLs in the core without trailing slash.  Default is ‘.’.  Set mxBasePath prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxBasePath = '/path/to/core/directory';
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

When using a relative path, the path is relative to the URL of the page that contains the assignment.  Trailing slashes are automatically removed.

imageBasePath

Basepath for all images URLs in the core without trailing slash.  Default is mxClient.basePath + ‘/images’.  Set mxImageBasePath prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxImageBasePath = '/path/to/image/directory';
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

When using a relative path, the path is relative to the URL of the page that contains the assignment.  Trailing slashes are automatically removed.

language

Defines the language of the client, eg. en for english, de for german etc.  The special value ‘none’ will disable all built-in internationalization and resource loading.  See mxResources.getSpecialBundle for handling identifiers with and without a dash.

Set mxLanguage prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxLanguage = 'en';
</script>
<script type="text/javascript" src="js/mxClient.js"></script>

If internationalization is disabled, then the following variables should be overridden to reflect the current language of the system.  These variables are cleared when i18n is disabled.  mxEditor.askZoomResource, mxEditor.lastSavedResource, mxEditor.currentFileResource, mxEditor.propertiesResource, mxEditor.tasksResource, mxEditor.helpResource, mxEditor.outlineResource, mxElbowEdgeHandler.doubleClickOrientationResource, mxUtils.errorResource, mxUtils.closeResource, mxGraphSelectionModel.doneResource, mxGraphSelectionModel.updatingSelectionResource, mxGraphView.doneResource, mxGraphView.updatingDocumentResource, <mxCellRenderer.collapseExpandResource>, mxGraph.containsValidationErrorsResource and mxGraph.alreadyConnectedResource.

defaultLanguage

Defines the default language which is used in the common resource files.  Any resources for this language will only load the common resource file, but not the language-specific resource file.  Default is ‘en’.

Set mxDefaultLanguage prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxDefaultLanguage = 'de';
</script>
<script type="text/javascript" src="js/mxClient.js"></script>

languages

Defines the optional array of all supported language extensions.  The default language does not have to be part of this list.  See mxResources.isLanguageSupported.

<script type="text/javascript">
     mxLanguages = ['de', 'it', 'fr'];
</script>
<script type="text/javascript" src="js/mxClient.js"></script>

This is used to avoid unnecessary requests to language files, ie. if a 404 will be returned.

mxLog

A singleton class that implements a simple console.

Summary
Variables
consoleNameSpecifies the name of the console window.
TRACESpecified if the output for enter and leave should be visible in the console.
DEBUGSpecifies if the output for debug should be visible in the console.
WARNSpecifies if the output for warn should be visible in the console.
bufferBuffer for pre-initialized content.
Functions
initInitializes the DOM node for the console.
infoWrites the current navigator information to the console.
addButtonAdds a button to the console using the given label and function.
isVisibleReturns true if the console is visible.
showShows the console.
setVisibleShows or hides the console.
enterWrites the specified string to the console if TRACE is true and returns the current time in milliseconds.
leaveWrites the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds.
debugAdds all arguments to the console if DEBUG is enabled.
warnAdds all arguments to the console if WARN is enabled.
writeAdds the specified strings to the console.
writelnAdds the specified strings to the console, appending a linefeed at the end of each string.

Variables

consoleName

Specifies the name of the console window.  Default is ‘Console’.

TRACE

Specified if the output for enter and leave should be visible in the console.  Default is false.

DEBUG

Specifies if the output for debug should be visible in the console.  Default is true.

WARN

Specifies if the output for warn should be visible in the console.  Default is true.

buffer

Buffer for pre-initialized content.

Functions

init

init: function()

Initializes the DOM node for the console.  This requires document.body to point to a non-null value.  This is called from within setVisible if the log has not yet been initialized.

info

info: function()

Writes the current navigator information to the console.

addButton

addButton: function(lab,
funct)

Adds a button to the console using the given label and function.

isVisible

isVisible: function()

Returns true if the console is visible.

show

show: function()

Shows the console.

setVisible

setVisible: function(visible)

Shows or hides the console.

enter

enter: function(string)

Writes the specified string to the console if TRACE is true and returns the current time in milliseconds.

Example

mxLog.show();
var t0 = mxLog.enter('Hello');
// Do something
mxLog.leave('World!', t0);

leave

leave: function(string,
t0)

Writes the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds.  See enter for an example.

debug

debug: function()

Adds all arguments to the console if DEBUG is enabled.

Example

mxLog.show();
mxLog.debug('Hello, World!');

warn

warn: function()

Adds all arguments to the console if WARN is enabled.

Example

mxLog.show();
mxLog.warn('Hello, World!');

write

write: function()

Adds the specified strings to the console.

writeln

writeln: function()

Adds the specified strings to the console, appending a linefeed at the end of each string.

mxObjectIdentity

Identity for JavaScript objects and functions.  This is implemented using a simple incrementing counter which is stored in each object under FIELD_NAME.

The identity for an object does not change during its lifecycle.

Summary
Variables
FIELD_NAMEName of the field to be used to store the object ID.
counterCurrent counter.
Functions
getReturns the ID for the given object or function or null if no object is specified.
clearDeletes the ID from the given object or function.

Variables

FIELD_NAME

Name of the field to be used to store the object ID.  Default is <code>mxObjectId</code>.

counter

Current counter.

Functions

get

get: function(obj)

Returns the ID for the given object or function or null if no object is specified.

clear

clear: function(obj)

Deletes the ID from the given object or function.

mxDictionary

A wrapper class for an associative array with object keys.  Note: This implementation uses <mxObjectIdentitiy> to turn object keys into strings.

Summary
Functions
mxEventSourceConstructs a new dictionary which allows object to be used as keys.
mapStores the (key, value) pairs in this dictionary.
clearClears the dictionary.
getReturns the value for the given key.
putStores the value under the given key and returns the previous value for that key.
removeRemoves the value for the given key and returns the value that has been removed.
getKeysReturns all keys as an array.
getValuesReturns all values as an array.
visitVisits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.

Functions

mxEventSource

Constructs a new dictionary which allows object to be used as keys.

map

Stores the (key, value) pairs in this dictionary.

clear

mxDictionary.prototype.clear = function()

Clears the dictionary.

get

mxDictionary.prototype.get = function(key)

Returns the value for the given key.

put

mxDictionary.prototype.put = function(key,
value)

Stores the value under the given key and returns the previous value for that key.

remove

mxDictionary.prototype.remove = function(key)

Removes the value for the given key and returns the value that has been removed.

getKeys

mxDictionary.prototype.getKeys = function()

Returns all keys as an array.

getValues

mxDictionary.prototype.getValues = function()

Returns all values as an array.

visit

mxDictionary.prototype.visit = function(visitor)

Visits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.

Parameters

visitorA function that takes the key and value as arguments.

mxResources

Implements internationalization.  You can provide any number of resource files on the server using the following format for the filename: name[-en].properties.  The en stands for any lowercase 2-character language shortcut (eg. de for german, fr for french).

If the optional language extension is omitted, then the file is used as a default resource which is loaded in all cases.  If a properties file for a specific language exists, then it is used to override the settings in the default resource.  All entries in the file are of the form key=value.  The values may then be accessed in code via get.  Lines without equal signs in the properties files are ignored.

Resource files may either be added programmatically using add or via a resource tag in the UI section of the editor configuration file, eg:

<mxEditor>
  <ui>
    <resource basename="examples/resources/mxWorkflow"/>

The above element will load examples/resources/mxWorkflow.properties as well as the language specific file for the current language, if it exists.

Values may contain placeholders of the form {1}...{n} where each placeholder is replaced with the value of the corresponding array element in the params argument passed to mxResources.get.  The placeholder {1} maps to the first element in the array (at index 0).

See mxClient.language for more information on specifying the default language or disabling all loading of resources.

Lines that start with a # sign will be ignored.

Special characters

To use unicode characters, use the standard notation (eg.  \u8fd1) or %u as a prefix (eg.  %u20AC will display a Euro sign).  For normal hex encoded strings, use % as a prefix, eg.  %F6 will display a “o umlaut” (&ouml;).

See resourcesEncoded to disable this.  If you disable this, make sure that your files are UTF-8 encoded.

Asynchronous loading

By default, the core adds two resource files synchronously at load time.  To load these files asynchronously, set <mxLoadResources> to false before loading mxClient.js and use mxResources.loadResources instead.

Summary
Variables
resourcesObject that maps from keys to values.
extensionSpecifies the extension used for language files.
resourcesEncodedSpecifies whether or not values in resource files are encoded with \u or percentage.
loadDefaultBundleSpecifies if the default file for a given basename should be loaded.
loadDefaultBundleSpecifies if the specific language file file for a given basename should be loaded.
Functions
isLanguageSupportedHook for subclassers to disable support for a given language.
getDefaultBundleHook for subclassers to return the URL for the special bundle.
getSpecialBundleHook for subclassers to return the URL for the special bundle.
addAdds the default and current language properties file for the specified basename.
parseParses the key, value pairs in the specified text and stores them as local resources.
getReturns the value for the specified resource key.
replacePlaceholdersReplaces the given placeholders with the given parameters.
loadResourcesLoads all required resources asynchronously.

Variables

resources

Object that maps from keys to values.

extension

Specifies the extension used for language files.  Default is <mxResourceExtension>.

resourcesEncoded

Specifies whether or not values in resource files are encoded with \u or percentage.  Default is false.

loadDefaultBundle

Specifies if the default file for a given basename should be loaded.  Default is true.

loadDefaultBundle

Specifies if the specific language file file for a given basename should be loaded.  Default is true.

Functions

isLanguageSupported

isLanguageSupported: function(lan)

Hook for subclassers to disable support for a given language.  This implementation returns true if lan is in mxClient.languages.

Parameters

lanThe current language.

getDefaultBundle

getDefaultBundle: function(basename,
lan)

Hook for subclassers to return the URL for the special bundle.  This implementation returns basename + extension or null if loadDefaultBundle is false.

Parameters

basenameThe basename for which the file should be loaded.
lanThe current language.

getSpecialBundle

getSpecialBundle: function(basename,
lan)

Hook for subclassers to return the URL for the special bundle.  This implementation returns basename + ‘_’ + lan + extension or null if <loadSpecialBundle> is false or lan equals mxClient.defaultLanguage.

If <mxResources.languages> is not null and mxClient.language contains a dash, then this method checks if isLanguageSupported returns true for the full language (including the dash).  If that returns false the first part of the language (up to the dash) will be tried as an extension.

If <mxResources.language> is null then the first part of the language is used to maintain backwards compatibility.

Parameters

basenameThe basename for which the file should be loaded.
lanThe language for which the file should be loaded.

add

add: function(basename,
lan,
callback)

Adds the default and current language properties file for the specified basename.  Existing keys are overridden as new files are added.  If no callback is used then the request is synchronous.

Example

At application startup, additional resources may be added using the following code:

mxResources.add('resources/editor');

Parameters

basenameThe basename for which the file should be loaded.
lanThe language for which the file should be loaded.
callbackOptional callback for asynchronous loading.

parse

parse: function(text)

Parses the key, value pairs in the specified text and stores them as local resources.

get

get: function(key,
params,
defaultValue)

Returns the value for the specified resource key.

Example

To read the value for ‘welomeMessage’, use the following:

var result = mxResources.get('welcomeMessage') || '';

This would require an entry of the following form in one of the English language resource files:

welcomeMessage=Welcome to mxGraph!

The part behind the || is the string value to be used if the given resource is not available.

Parameters

keyString that represents the key of the resource to be returned.
paramsArray of the values for the placeholders of the form {1}...{n} to be replaced with in the resulting string.
defaultValueOptional string that specifies the default return value.

replacePlaceholders

replacePlaceholders: function(value,
params)

Replaces the given placeholders with the given parameters.

Parameters

valueString that contains the placeholders.
paramsArray of the values for the placeholders of the form {1}...{n} to be replaced with in the resulting string.

loadResources

loadResources: function(callback)

Loads all required resources asynchronously.  Use this to load the graph and editor resources if <mxLoadResources> is false.

Parameters

callbackCallback function for asynchronous loading.

mxPoint

Implements a 2-dimensional vector with double precision coordinates.

Summary
Functions
mxPointConstructs a new point for the optional x and y coordinates.
Variables
xHolds the x-coordinate of the point.
yHolds the y-coordinate of the point.
Functions
equalsReturns true if the given object equals this point.
cloneReturns a clone of this mxPoint.

Functions

mxPoint

function mxPoint(x,
y)

Constructs a new point for the optional x and y coordinates.  If no coordinates are given, then the default values for x and y are used.

Variables

x

mxPoint.prototype.x

Holds the x-coordinate of the point.  Default is 0.

y

mxPoint.prototype.y

Holds the y-coordinate of the point.  Default is 0.

Functions

equals

mxPoint.prototype.equals = function(obj)

Returns true if the given object equals this point.

clone

mxPoint.prototype.clone = function()

Returns a clone of this mxPoint.

mxRectangle

Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.

Summary
Functions
mxRectangleConstructs a new rectangle for the optional parameters.
Variables
widthHolds the width of the rectangle.
heightHolds the height of the rectangle.
Functions
setRectSets this rectangle to the specified values
getCenterXReturns the x-coordinate of the center point.
getCenterYReturns the y-coordinate of the center point.
addAdds the given rectangle to this rectangle.
intersectChanges this rectangle to where it overlaps with the given rectangle.
growGrows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.
getPointReturns the top, left corner as a new mxPoint.
rotate90Rotates this rectangle by 90 degree around its center point.
equalsReturns true if the given object equals this rectangle.
fromRectangleReturns a new mxRectangle which is a copy of the given rectangle.

Functions

mxRectangle

function mxRectangle(x,
y,
width,
height)

Constructs a new rectangle for the optional parameters.  If no parameters are given then the respective default values are used.

Variables

width

mxRectangle.prototype.width

Holds the width of the rectangle.  Default is 0.

height

mxRectangle.prototype.height

Holds the height of the rectangle.  Default is 0.

Functions

setRect

mxRectangle.prototype.setRect = function(x,
y,
w,
h)

Sets this rectangle to the specified values

getCenterX

mxRectangle.prototype.getCenterX = function ()

Returns the x-coordinate of the center point.

getCenterY

mxRectangle.prototype.getCenterY = function ()

Returns the y-coordinate of the center point.

add

mxRectangle.prototype.add = function(rect)

Adds the given rectangle to this rectangle.

intersect

mxRectangle.prototype.intersect = function(rect)

Changes this rectangle to where it overlaps with the given rectangle.

grow

mxRectangle.prototype.grow = function(amount)

Grows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.

getPoint

mxRectangle.prototype.getPoint = function()

Returns the top, left corner as a new mxPoint.

rotate90

mxRectangle.prototype.rotate90 = function()

Rotates this rectangle by 90 degree around its center point.

equals

mxRectangle.prototype.equals = function(obj)

Returns true if the given object equals this rectangle.

fromRectangle

mxRectangle.fromRectangle = function(rect)

Returns a new mxRectangle which is a copy of the given rectangle.

mxEffects

Provides animation effects.

Summary
Functions
animateChangesAsynchronous animated move operation.
cascadeOpacitySets the opacity on the given cell and its descendants.
fadeOutAsynchronous fade-out operation.

Functions

animateChanges

animateChanges: function(graph,
changes,
done)

Asynchronous animated move operation.  See also: mxMorphing.

Example

graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;

  if (changes.length < 10)
  {
    mxEffects.animateChanges(graph, changes);
  }
});

Parameters

graphmxGraph that received the changes.
changesArray of changes to be animated.
doneOptional function argument that is invoked after the last step of the animation.

cascadeOpacity

cascadeOpacity: function(graph,
cell,
opacity)

Sets the opacity on the given cell and its descendants.

Parameters

graphmxGraph that contains the cells.
cellmxCell to set the opacity for.
opacityNew value for the opacity in %.

fadeOut

fadeOut: function(node,
from,
remove,
step,
delay,
isEnabled)

Asynchronous fade-out operation.

mxUtils

A singleton class that provides cross-browser helper methods.  This is a global functionality.  To access the functions in this class, use the global classname appended by the functionname.  You may have to load chrome://global/content/contentAreaUtils.js to disable certain security restrictions in Mozilla for the <open>, <save>, <saveAs> and <copy> function.

For example, the following code displays an error message

mxUtils.error('Browser is not supported!', 200, false);
Summary
Variables
errorResourceSpecifies the resource key for the title of the error window.
closeResourceSpecifies the resource key for the label of the close button.
errorImageDefines the image used for error dialogs.
Functions
removeCursorsRemoves the cursors from the style of the given DOM node and its descendants.
getCurrentStyleReturns the current style of the specified element.
parseCssNumberParses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).
setPrefixedStyleAdds the given style with the standard name and an optional vendor prefix for the current browser.
hasScrollbarsReturns true if the overflow CSS property of the given node is either scroll or auto.
bindReturns a wrapper function that locks the execution scope of the given function to the specified scope.
evalEvaluates the given expression using eval and returns the JavaScript object that represents the expression result.
findNodeReturns the first node where attr equals value.
getFunctionNameReturns the name for the given function.
indexOfReturns the index of obj in array or -1 if the array does not contain the given object.
forEachCalls the given function for each element of the given array and returns the array.
removeRemoves all occurrences of the given object in the given array or object.
isNodeReturns true if the given value is an XML node with the node name and if the optional attribute has the specified value.
isAncestorNodeReturns true if the given ancestor is an ancestor of the given DOM node in the DOM.
getChildNodesReturns an array of child nodes that are of the given node type.
importNodeCross browser implementation for document.importNode.
createXmlDocumentReturns a new, empty XML document.
parseXmlParses the specified XML string into a new XML document and returns the new document.
clearSelectionClears the current selection in the page.
getPrettyXMLReturns a pretty printed string that represents the XML tree for the given node.
removeWhitespaceRemoves the sibling text nodes for the given node that only consists of tabs, newlines and spaces.
htmlEntitiesReplaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.
isVmlReturns true if the given node is in the VML namespace.
getXmlReturns the XML content of the specified node.
extractTextWithWhitespaceReturns the text content of the specified node.
replaceTrailingNewlinesReplaces each trailing newline with the given pattern.
getTextContentReturns the text content of the specified node.
setTextContentSets the text content of the specified node.
getInnerHtmlReturns the inner HTML for the given node as a string or an empty string if no node was specified.
getOuterHtmlReturns the outer HTML for the given node as a string or an empty string if no node was specified.
writeCreates a text node for the given string and appends it to the given parent.
writelnCreates a text node for the given string and appends it to the given parent with an additional linefeed.
brAppends a linebreak to the given parent and returns the linebreak.
buttonReturns a new button with the given level and function as an onclick event handler.
paraAppends a new paragraph with the given text to the specified parent and returns the paragraph.
addTransparentBackgroundFilterAdds a transparent background to the filter of the given node.
linkActionAdds a hyperlink to the specified parent that invokes action on the specified editor.
linkInvokeAdds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.
linkAdds a hyperlink to the specified parent and invokes the given function when the link is clicked.
getDocumentSizeReturns the client size for the current document as an mxRectangle.
fitMakes sure the given node is inside the visible area of the window.
loadLoads the specified URL synchronously and returns the mxXmlRequest.
getLoads the specified URL asynchronously and invokes the given functions depending on the request status.
getAllLoads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.
postPosts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.
submitSubmits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.
loadIntoLoads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.
getValueReturns the value for the given key in the given associative array or the given default value if the value is null.
getNumberReturns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.
getColorReturns the color value for the given key in the given associative array or the given default value if the value is null.
cloneRecursively clones the specified object ignoring all fieldnames in the given array of transient fields.
equalPointsCompares all mxPoints in the given lists.
equalEntriesReturns true if all properties of the given objects are equal.
removeDuplicatesRemoves all duplicates from the given array.
isNaNReturns true if the given value is of type number and isNaN returns true.
extendAssigns a copy of the superclass prototype to the subclass prototype.
toStringReturns a textual representation of the specified object.
toRadiansConverts the given degree to radians.
toDegreeConverts the given radians to degree.
arcToCurvesConverts the given arc to a series of curves.
getBoundingBoxReturns the bounding box for the rotated rectangle.
getRotatedPointRotates the given point by the given cos and sin.
reversePortConstraintsReverse the port constraint bitmask.
findNearestSegmentFinds the index of the nearest segment on the given cell state for the specified coordinate pair.
getDirectedBoundsAdds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.
getPerimeterPointReturns the intersection between the polygon defined by the array of points and the line between center and point.
rectangleIntersectsSegmentReturns true if the given rectangle intersects the given segment.
containsReturns true if the specified point (x, y) is contained in the given rectangle.
intersectsReturns true if the two rectangles intersect.
intersectsReturns true if the two rectangles intersect.
getOffsetReturns the offset for the specified container as an mxPoint.
getDocumentScrollOriginReturns the scroll origin of the given document or the current document if no document is given.
getScrollOriginReturns the top, left corner of the viewrect as an mxPoint.
convertPointConverts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
ltrimStrips all whitespaces from the beginning of the string.
rtrimStrips all whitespaces from the end of the string.
trimStrips all whitespaces from both end of the string.
isNumericReturns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.
isIntegerReturns true if the given value is an valid integer number.
modReturns the remainder of division of n by m.
intersectionReturns the intersection of two lines as an mxPoint.
ptSegDistSqReturns the square distance between a segment and a point.
ptLineDistReturns the distance between a line defined by two points and a point.
relativeCcwReturns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.
animateChangesSee mxEffects.animateChanges.
cascadeOpacitySee mxEffects.cascadeOpacity.
fadeOutSee mxEffects.fadeOut.
setOpacitySets the opacity of the specified DOM node to the given value in %.
createImageCreates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.
sortCellsSorts the given cells according to the order in the cell hierarchy.
getStylenameReturns the stylename in a style of the form [(stylename|key=value);] or an empty string if the given style does not contain a stylename.
getStylenamesReturns the stylenames in a style of the form [(stylename|key=value);] or an empty array if the given style does not contain any stylenames.
indexOfStylenameReturns the index of the given stylename in the given style.
addStylenameAdds the specified stylename to the given style if it does not already contain the stylename.
removeStylenameRemoves all occurrences of the specified stylename in the given style and returns the updated style.
removeAllStylenamesRemoves all stylenames from the given style and returns the updated style.
setCellStylesAssigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.
setStyleAdds or removes the given key, value pair to the style and returns the new style.
setCellStyleFlagsSets or toggles the flag bit for the given key in the cell’s styles.
setStyleFlagSets or removes the given key from the specified style and returns the new style.
getAlignmentAsPointReturns an mxPoint that represents the horizontal and vertical alignment for numeric computations.
getSizeForStringReturns an mxRectangle with the size (width and height in pixels) of the given string.
getViewXml
getScaleForPageCountReturns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
showCopies the styles and the markup from the graph’s container into the given document and removes all cursor styles.
printScreenPrints the specified graph using a new window and the built-in print dialog.
popupShows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
alertDisplayss the given alert in a new dialog.
promptDisplays the given message in a prompt dialog.
confirmDisplays the given message in a confirm dialog.
errorDisplays the given error message in a new mxWindow of the given width.
makeDraggableConfigures the given DOM element to act as a drag source for the specified graph.

Variables

errorResource

Specifies the resource key for the title of the error window.  If the resource for this key does not exist then the value is used as the title.  Default is ‘error’.

closeResource

Specifies the resource key for the label of the close button.  If the resource for this key does not exist then the value is used as the label.  Default is ‘close’.

errorImage

Defines the image used for error dialogs.

Functions

removeCursors

removeCursors: function(element)

Removes the cursors from the style of the given DOM node and its descendants.

Parameters

elementDOM node to remove the cursor style from.

getCurrentStyle

getCurrentStyle: function()

Returns the current style of the specified element.

Parameters

elementDOM node whose current style should be returned.

parseCssNumber

parseCssNumber: function(value)

Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).

setPrefixedStyle

setPrefixedStyle: function()

Adds the given style with the standard name and an optional vendor prefix for the current browser.

mxUtils.setPrefixedStyle(node.style, 'transformOrigin', '0% 0%');

hasScrollbars

hasScrollbars: function(node)

Returns true if the overflow CSS property of the given node is either scroll or auto.

Parameters

nodeDOM node whose style should be checked for scrollbars.

bind

bind: function(scope,
funct)

Returns a wrapper function that locks the execution scope of the given function to the specified scope.  Inside funct, the “this” keyword becomes a reference to that scope.

eval

eval: function(expr)

Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.  Supports evaluation of expressions that define functions and returns the function object for these expressions.

Parameters

exprA string that represents a JavaScript expression.

findNode

findNode: function(node,
attr,
value)

Returns the first node where attr equals value.  This implementation does not use XPath.

getFunctionName

getFunctionName: function(f)

Returns the name for the given function.

Parameters

fJavaScript object that represents a function.

indexOf

indexOf: function(array,
obj)

Returns the index of obj in array or -1 if the array does not contain the given object.

Parameters

arrayArray to check for the given obj.
objObject to find in the given array.

forEach

forEach: function(array,
fn)

Calls the given function for each element of the given array and returns the array.

Parameters

arrayArray that contains the elements.
fnFunction to be called for each object.

remove

remove: function(obj,
array)

Removes all occurrences of the given object in the given array or object.  If there are multiple occurrences of the object, be they associative or as an array entry, all occurrences are removed from the array or deleted from the object.  By removing the object from the array, all elements following the removed element are shifted by one step towards the beginning of the array.

The length of arrays is not modified inside this function.

Parameters

objObject to find in the given array.
arrayArray to check for the given obj.

isNode

isNode: function(value,
nodeName,
attributeName,
attributeValue)

Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.

This implementation assumes that the given value is a DOM node if the nodeType property is numeric, that is, if isNaN returns false for value.nodeType.

Parameters

valueObject that should be examined as a node.
nodeNameString that specifies the node name.
attributeNameOptional attribute name to check.
attributeValueOptional attribute value to check.

isAncestorNode

isAncestorNode: function(ancestor,
child)

Returns true if the given ancestor is an ancestor of the given DOM node in the DOM.  This also returns true if the child is the ancestor.

Parameters

ancestorDOM node that represents the ancestor.
childDOM node that represents the child.

getChildNodes

getChildNodes: function(node,
nodeType)

Returns an array of child nodes that are of the given node type.

Parameters

nodeParent DOM node to return the children from.
nodeTypeOptional node type to return.  Default is mxConstants.NODETYPE_ELEMENT.

importNode

importNode: function(doc,
node,
allChildren)

Cross browser implementation for document.importNode.  Uses document.importNode in all browsers but IE, where the node is cloned by creating a new node and copying all attributes and children into it using importNode, recursively.

Parameters

docDocument to import the node into.
nodeNode to be imported.
allChildrenIf all children should be imported.

createXmlDocument

createXmlDocument: function()

Returns a new, empty XML document.

parseXml

parseXml: function()

Parses the specified XML string into a new XML document and returns the new document.

Example

var doc = mxUtils.parseXml(
  '<mxGraphModel><root><MyDiagram id="0"><mxCell/></MyDiagram>'+
  '<MyLayer id="1"><mxCell parent="0" /></MyLayer><MyObject id="2">'+
  '<mxCell style="strokeColor=blue;fillColor=red" parent="1" vertex="1">'+
  '<mxGeometry x="10" y="10" width="80" height="30" as="geometry"/>'+
  '</mxCell></MyObject></root></mxGraphModel>');

Parameters

xmlString that contains the XML data.

clearSelection

clearSelection: function()

Clears the current selection in the page.

getPrettyXML

Returns a pretty printed string that represents the XML tree for the given node.  This method should only be used to print XML for reading, use getXml instead to obtain a string for processing.

Parameters

nodeDOM node to return the XML for.
tabOptional string that specifies the indentation for one level.  Default is two spaces.
indentOptional string that represents the current indentation.  Default is an empty string.

removeWhitespace

removeWhitespace: function(node,
before)

Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.

Parameters

nodeDOM node whose siblings should be removed.
beforeOptional boolean that specifies the direction of the traversal.

htmlEntities

htmlEntities: function(s,
newline)

Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.

Parameters

sString that contains the characters to be converted.
newlineIf newlines should be replaced.  Default is true.

isVml

isVml: function(node)

Returns true if the given node is in the VML namespace.

Parameters

nodeDOM node whose tag urn should be checked.

getXml

getXml: function(node,
linefeed)

Returns the XML content of the specified node.  For Internet Explorer, all \r\n\t[\t]* are removed from the XML string and the remaining \r\n are replaced by \n.  All \n are then replaced with linefeed, or &#xa; if no linefeed is defined.

Parameters

nodeDOM node to return the XML for.
linefeedOptional string that linefeeds are converted into.  Default is &#xa;

extractTextWithWhitespace

extractTextWithWhitespace: function(elems)

Returns the text content of the specified node.

Parameters

elemsDOM nodes to return the text for.

replaceTrailingNewlines

replaceTrailingNewlines: function(str,
pattern)

Replaces each trailing newline with the given pattern.

getTextContent

getTextContent: function(node)

Returns the text content of the specified node.

Parameters

nodeDOM node to return the text content for.

setTextContent

setTextContent: function(node,
text)

Sets the text content of the specified node.

Parameters

nodeDOM node to set the text content for.
textString that represents the text content.

getInnerHtml

getInnerHtml: function()

Returns the inner HTML for the given node as a string or an empty string if no node was specified.  The inner HTML is the text representing all children of the node, but not the node itself.

Parameters

nodeDOM node to return the inner HTML for.

getOuterHtml

getOuterHtml: function()

Returns the outer HTML for the given node as a string or an empty string if no node was specified.  The outer HTML is the text representing all children of the node including the node itself.

Parameters

nodeDOM node to return the outer HTML for.

write

write: function(parent,
text)

Creates a text node for the given string and appends it to the given parent.  Returns the text node.

Parameters

parentDOM node to append the text node to.
textString representing the text to be added.

writeln

writeln: function(parent,
text)

Creates a text node for the given string and appends it to the given parent with an additional linefeed.  Returns the text node.

Parameters

parentDOM node to append the text node to.
textString representing the text to be added.

br

br: function(parent,
count)

Appends a linebreak to the given parent and returns the linebreak.

Parameters

parentDOM node to append the linebreak to.

button

button: function(label,
funct,
doc)

Returns a new button with the given level and function as an onclick event handler.

document.body.appendChild(mxUtils.button('Test', function(evt)
{
  alert('Hello, World!');
}));

Parameters

labelString that represents the label of the button.
functFunction to be called if the button is pressed.
docOptional document to be used for creating the button.  Default is the current document.

para

para: function(parent,
text)

Appends a new paragraph with the given text to the specified parent and returns the paragraph.

Parameters

parentDOM node to append the text node to.
textString representing the text for the new paragraph.

addTransparentBackgroundFilter

addTransparentBackgroundFilter: function(node)

Adds a transparent background to the filter of the given node.  This background can be used in IE8 standards mode (native IE8 only) to pass events through the node.

linkAction

linkAction: function(parent,
text,
editor,
action,
pad)

Adds a hyperlink to the specified parent that invokes action on the specified editor.

Parameters

parentDOM node to contain the new link.
textString that is used as the link label.
editormxEditor that will execute the action.
actionString that defines the name of the action to be executed.
padOptional left-padding for the link.  Default is 0.

linkInvoke

linkInvoke: function(parent,
text,
editor,
functName,
arg,
pad)

Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.  The function name is the name of a function of the editor instance, not an action name.

Parameters

parentDOM node to contain the new link.
textString that is used as the link label.
editormxEditor instance to execute the function on.
functNameString that represents the name of the function.
argObject that represents the argument to the function.
padOptional left-padding for the link.  Default is 0.

link

link: function(parent,
text,
funct,
pad)

Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.

Parameters

parentDOM node to contain the new link.
textString that is used as the link label.
functFunction to execute when the link is clicked.
padOptional left-padding for the link.  Default is 0.

getDocumentSize

getDocumentSize: function()

Returns the client size for the current document as an mxRectangle.

fit

fit: function(node)

Makes sure the given node is inside the visible area of the window.  This is done by setting the left and top in the style.

load

load: function(url)

Loads the specified URL synchronously and returns the mxXmlRequest.  Throws an exception if the file cannot be loaded.  See mxUtils.get for an asynchronous implementation.

Example

try
{
  var req = mxUtils.load(filename);
  var root = req.getDocumentElement();
  // Process XML DOM...
}
catch (ex)
{
  mxUtils.alert('Cannot load '+filename+': '+ex);
}

Parameters

urlURL to get the data from.

get

get: function(url,
onload,
onerror,
binary,
timeout,
ontimeout)

Loads the specified URL asynchronously and invokes the given functions depending on the request status.  Returns the mxXmlRequest in use.  Both functions take the mxXmlRequest as the only parameter.  See mxUtils.load for a synchronous implementation.

Example

mxUtils.get(url, function(req)
{
   var node = req.getDocumentElement();
   // Process XML DOM...
});

So for example, to load a diagram into an existing graph model, the following code is used.

mxUtils.get(url, function(req)
{
  var node = req.getDocumentElement();
  var dec = new mxCodec(node.ownerDocument);
  dec.decode(node, graph.getModel());
});

Parameters

urlURL to get the data from.
onloadOptional function to execute for a successful response.
onerrorOptional function to execute on error.
binaryOptional boolean parameter that specifies if the request is binary.
timeoutOptional timeout in ms before calling ontimeout.
ontimeoutOptional function to execute on timeout.

getAll

getAll: function(urls,
onload,
onerror)

Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.  The error handler is invoked once on the first error or invalid response.

Parameters

urlsArray of URLs to be loaded.
onloadCallback with array of mxXmlRequests.
onerrorOptional function to execute on error.

post

post: function(url,
params,
onload,
onerror)

Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.  Returns the mxXmlRequest in use.  Both functions take the mxXmlRequest as the only parameter.  Make sure to use encodeURIComponent for the parameter values.

Example

mxUtils.post(url, 'key=value', function(req)
{
 mxUtils.alert('Ready: '+req.isReady()+' Status: '+req.getStatus());
 // Process req.getDocumentElement() using DOM API if OK...
});

Parameters

urlURL to get the data from.
paramsParameters for the post request.
onloadOptional function to execute for a successful response.
onerrorOptional function to execute on error.

submit

submit: function(url,
params,
doc,
target)

Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.  Make sure to use encodeURIComponent for the parameter values.

Parameters

urlURL to get the data from.
paramsParameters for the form.
docDocument to create the form in.
targetTarget to send the form result to.

loadInto

loadInto: function(url,
doc,
onload)

Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.  This implementation does not use mxXmlRequest, but the document.load method.

Parameters

urlURL to get the data from.
docThe document to load the URL into.
onloadFunction to execute when the URL has been loaded.

getValue

getValue: function(array,
key,
defaultValue)

Returns the value for the given key in the given associative array or the given default value if the value is null.

Parameters

arrayAssociative array that contains the value for the key.
keyKey whose value should be returned.
defaultValueValue to be returned if the value for the given key is null.

getNumber

getNumber: function(array,
key,
defaultValue)

Returns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.  The value is converted to a numeric value using the Number function.

Parameters

arrayAssociative array that contains the value for the key.
keyKey whose value should be returned.
defaultValueValue to be returned if the value for the given key is null.  Default is 0.

getColor

getColor: function(array,
key,
defaultValue)

Returns the color value for the given key in the given associative array or the given default value if the value is null.  If the value is mxConstants.NONE then null is returned.

Parameters

arrayAssociative array that contains the value for the key.
keyKey whose value should be returned.
defaultValueValue to be returned if the value for the given key is null.  Default is null.

clone

clone: function(obj,
transients,
shallow)

Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.  mxObjectIdentity.FIELD_NAME is always ignored by this function.

Parameters

objObject to be cloned.
transientsOptional array of strings representing the fieldname to be ignored.
shallowOptional boolean argument to specify if a shallow clone should be created, that is, one where all object references are not cloned or, in other words, one where only atomic (strings, numbers) values are cloned.  Default is false.

equalPoints

equalPoints: function(a,
b)

Compares all mxPoints in the given lists.

Parameters

aArray of mxPoints to be compared.
bArray of mxPoints to be compared.

equalEntries

equalEntries: function(a,
b)

Returns true if all properties of the given objects are equal.  Values with NaN are equal to NaN and unequal to any other value.

Parameters

aFirst object to be compared.
bSecond object to be compared.

removeDuplicates

removeDuplicates: function(arr)

Removes all duplicates from the given array.

isNaN

isNaN: function(value)

Returns true if the given value is of type number and isNaN returns true.

extend

extend: function(ctor,
superCtor)

Assigns a copy of the superclass prototype to the subclass prototype.  Note that this does not call the constructor of the superclass at this point, the superclass constructor should be called explicitely in the subclass constructor.  Below is an example.

MyGraph = function(container, model, renderHint, stylesheet)
{
  mxGraph.call(this, container, model, renderHint, stylesheet);
}

mxUtils.extend(MyGraph, mxGraph);

Parameters

ctorConstructor of the subclass.
superCtorConstructor of the superclass.

toString

toString: function(obj)

Returns a textual representation of the specified object.

Parameters

objObject to return the string representation for.

toRadians

toRadians: function(deg)

Converts the given degree to radians.

toDegree

toDegree: function(rad)

Converts the given radians to degree.

arcToCurves

arcToCurves: function(x0,
y0,
r1,
r2,
angle,
largeArcFlag,
sweepFlag,
x,
y)

Converts the given arc to a series of curves.

getBoundingBox

getBoundingBox: function(rect,
rotation,
cx)

Returns the bounding box for the rotated rectangle.

Parameters

rectmxRectangle to be rotated.
angleNumber that represents the angle (in degrees).
cxOptional mxPoint that represents the rotation center.  If no rotation center is given then the center of rect is used.

getRotatedPoint

getRotatedPoint: function(pt,
cos,
sin,
c)

Rotates the given point by the given cos and sin.

reversePortConstraints

reversePortConstraints: function(constraint)

Reverse the port constraint bitmask.  For example, north | east becomes south | west

findNearestSegment

findNearestSegment: function(state,
x,
y)

Finds the index of the nearest segment on the given cell state for the specified coordinate pair.

getDirectedBounds

getDirectedBounds: function (rect,
m,
style,
flipH,
flipV)

Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.

getPerimeterPoint

getPerimeterPoint: function (pts,
center,
point)

Returns the intersection between the polygon defined by the array of points and the line between center and point.

rectangleIntersectsSegment

rectangleIntersectsSegment: function(bounds,
p1,
p2)

Returns true if the given rectangle intersects the given segment.

Parameters

boundsmxRectangle that represents the rectangle.
p1mxPoint that represents the first point of the segment.
p2mxPoint that represents the second point of the segment.

contains

contains: function(bounds,
x,
y)

Returns true if the specified point (x, y) is contained in the given rectangle.

Parameters

boundsmxRectangle that represents the area.
xX-coordinate of the point.
yY-coordinate of the point.

intersects

intersects: function(a,
b)

Returns true if the two rectangles intersect.

Parameters

amxRectangle to be checked for intersection.
bmxRectangle to be checked for intersection.

intersects

intersectsHotspot: function(state,
x,
y,
hotspot,
min,
max)

Returns true if the two rectangles intersect.

Parameters

amxRectangle to be checked for intersection.
bmxRectangle to be checked for intersection.

getOffset

getOffset: function(container,
scrollOffset)

Returns the offset for the specified container as an mxPoint.  The offset is the distance from the top left corner of the container to the top left corner of the document.

Parameters

containerDOM node to return the offset for.
scollOffsetOptional boolean to add the scroll offset of the document.  Default is false.

getDocumentScrollOrigin

getDocumentScrollOrigin: function(doc)

Returns the scroll origin of the given document or the current document if no document is given.

getScrollOrigin

getScrollOrigin: function(node,
includeAncestors,
includeDocument)

Returns the top, left corner of the viewrect as an mxPoint.

Parameters

nodeDOM node whose scroll origin should be returned.
includeAncestorsWhether the scroll origin of the ancestors should be included.  Default is false.
includeDocumentWhether the scroll origin of the document should be included.  Default is true.

convertPoint

convertPoint: function(container,
x,
y)

Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.

var pt = mxUtils.convertPoint(graph.container,
  mxEvent.getClientX(evt), mxEvent.getClientY(evt));

Parameters

containerDOM node to use for the offset.
xX-coordinate of the point to be converted.
yY-coordinate of the point to be converted.

ltrim

ltrim: function(str,
chars)

Strips all whitespaces from the beginning of the string.  Without the second parameter, this will trim these characters:

  • ” “ (ASCII 32 (0x20)), an ordinary space
  • ”\t” (ASCII 9 (0x09)), a tab
  • ”\n” (ASCII 10 (0x0A)), a new line (line feed)
  • ”\r” (ASCII 13 (0x0D)), a carriage return
  • ”\0” (ASCII 0 (0x00)), the NUL-byte
  • ”\x0B” (ASCII 11 (0x0B)), a vertical tab

rtrim

rtrim: function(str,
chars)

Strips all whitespaces from the end of the string.  Without the second parameter, this will trim these characters:

  • ” “ (ASCII 32 (0x20)), an ordinary space
  • ”\t” (ASCII 9 (0x09)), a tab
  • ”\n” (ASCII 10 (0x0A)), a new line (line feed)
  • ”\r” (ASCII 13 (0x0D)), a carriage return
  • ”\0” (ASCII 0 (0x00)), the NUL-byte
  • ”\x0B” (ASCII 11 (0x0B)), a vertical tab

trim

trim: function(str,
chars)

Strips all whitespaces from both end of the string.  Without the second parameter, Javascript function will trim these characters:

  • ” “ (ASCII 32 (0x20)), an ordinary space
  • ”\t” (ASCII 9 (0x09)), a tab
  • ”\n” (ASCII 10 (0x0A)), a new line (line feed)
  • ”\r” (ASCII 13 (0x0D)), a carriage return
  • ”\0” (ASCII 0 (0x00)), the NUL-byte
  • ”\x0B” (ASCII 11 (0x0B)), a vertical tab

isNumeric

isNumeric: function(n)

Returns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.

Parameters

nString representing the possibly numeric value.

isInteger

isInteger: function(n)

Returns true if the given value is an valid integer number.

Parameters

nString representing the possibly numeric value.

mod

mod: function(n,
m)

Returns the remainder of division of n by m.  You should use this instead of the built-in operation as the built-in operation does not properly handle negative numbers.

intersection

intersection: function (x0,
y0,
x1,
y1,
x2,
y2,
x3,
y3)

Returns the intersection of two lines as an mxPoint.

Parameters

x0X-coordinate of the first line’s startpoint.
y0X-coordinate of the first line’s startpoint.
x1X-coordinate of the first line’s endpoint.
y1Y-coordinate of the first line’s endpoint.
x2X-coordinate of the second line’s startpoint.
y2Y-coordinate of the second line’s startpoint.
x3X-coordinate of the second line’s endpoint.
y3Y-coordinate of the second line’s endpoint.

ptSegDistSq

ptSegDistSq: function(x1,
y1,
x2,
y2,
px,
py)

Returns the square distance between a segment and a point.  To get the distance between a point and a line (with infinite length) use mxUtils.ptLineDist.

Parameters

x1X-coordinate of the startpoint of the segment.
y1Y-coordinate of the startpoint of the segment.
x2X-coordinate of the endpoint of the segment.
y2Y-coordinate of the endpoint of the segment.
pxX-coordinate of the point.
pyY-coordinate of the point.

ptLineDist

ptLineDist: function(x1,
y1,
x2,
y2,
px,
py)

Returns the distance between a line defined by two points and a point.  To get the distance between a point and a segment (with a specific length) use <mxUtils.ptSeqDistSq>.

Parameters

x1X-coordinate of point 1 of the line.
y1Y-coordinate of point 1 of the line.
x2X-coordinate of point 1 of the line.
y2Y-coordinate of point 1 of the line.
pxX-coordinate of the point.
pyY-coordinate of the point.

relativeCcw

relativeCcw: function(x1,
y1,
x2,
y2,
px,
py)

Returns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.

Parameters

x1X-coordinate of the startpoint of the segment.
y1Y-coordinate of the startpoint of the segment.
x2X-coordinate of the endpoint of the segment.
y2Y-coordinate of the endpoint of the segment.
pxX-coordinate of the point.
pyY-coordinate of the point.

animateChanges

animateChanges: function(graph,
changes)

See mxEffects.animateChanges.  This is for backwards compatibility and will be removed later.

cascadeOpacity

cascadeOpacity: function(graph,
cell,
opacity)

See mxEffects.cascadeOpacity.  This is for backwards compatibility and will be removed later.

fadeOut

fadeOut: function(node,
from,
remove,
step,
delay,
isEnabled)

See mxEffects.fadeOut.  This is for backwards compatibility and will be removed later.

setOpacity

setOpacity: function(node,
value)

Sets the opacity of the specified DOM node to the given value in %.

Parameters

nodeDOM node to set the opacity for.
valueOpacity in %.  Possible values are between 0 and 100.

createImage

createImage: function(src)

Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.

Parameters

srcURL that points to the image to be displayed.

sortCells

sortCells: function(cells,
ascending)

Sorts the given cells according to the order in the cell hierarchy.  Ascending is optional and defaults to true.

getStylename

getStylename: function(style)

Returns the stylename in a style of the form [(stylename|key=value);] or an empty string if the given style does not contain a stylename.

Parameters

styleString of the form [(stylename|key=value);].

getStylenames

getStylenames: function(style)

Returns the stylenames in a style of the form [(stylename|key=value);] or an empty array if the given style does not contain any stylenames.

Parameters

styleString of the form [(stylename|key=value);].

indexOfStylename

indexOfStylename: function(style,
stylename)

Returns the index of the given stylename in the given style.  This returns -1 if the given stylename does not occur (as a stylename) in the given style, otherwise it returns the index of the first character.

addStylename

addStylename: function(style,
stylename)

Adds the specified stylename to the given style if it does not already contain the stylename.

removeStylename

removeStylename: function(style,
stylename)

Removes all occurrences of the specified stylename in the given style and returns the updated style.  Trailing semicolons are not preserved.

removeAllStylenames

removeAllStylenames: function(style)

Removes all stylenames from the given style and returns the updated style.

setCellStyles

setCellStyles: function(model,
cells,
key,
value)

Assigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.

Parameters

modelmxGraphModel to execute the transaction in.
cellsArray of mxCells to be updated.
keyKey of the style to be changed.
valueNew value for the given key.

setStyle

setStyle: function(style,
key,
value)

Adds or removes the given key, value pair to the style and returns the new style.  If value is null or zero length then the key is removed from the style.  This is for cell styles, not for CSS styles.

Parameters

styleString of the form [(stylename|key=value);].
keyKey of the style to be changed.
valueNew value for the given key.

setCellStyleFlags

setCellStyleFlags: function(model,
cells,
key,
flag,
value)

Sets or toggles the flag bit for the given key in the cell’s styles.  If value is null then the flag is toggled.

Example

var cells = graph.getSelectionCells();
mxUtils.setCellStyleFlags(graph.model,
         cells,
         mxConstants.STYLE_FONTSTYLE,
         mxConstants.FONT_BOLD);

Toggles the bold font style.

Parameters

modelmxGraphModel that contains the cells.
cellsArray of mxCells to change the style for.
keyKey of the style to be changed.
flagInteger for the bit to be changed.
valueOptional boolean value for the flag.

setStyleFlag

setStyleFlag: function(style,
key,
flag,
value)

Sets or removes the given key from the specified style and returns the new style.  If value is null then the flag is toggled.

Parameters

styleString of the form [(stylename|key=value);].
keyKey of the style to be changed.
flagInteger for the bit to be changed.
valueOptional boolean value for the given flag.

getAlignmentAsPoint

getAlignmentAsPoint: function(align,
valign)

Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations.  X is -0.5 for center, -1 for right and 0 for left alignment.  Y is -0.5 for middle, -1 for bottom and 0 for top alignment.  Default values for missing arguments is top, left.

getSizeForString

getSizeForString: function(text,
fontSize,
fontFamily,
textWidth)

Returns an mxRectangle with the size (width and height in pixels) of the given string.  The string may contain HTML markup.  Newlines should be converted to br before calling this method.  The caller is responsible for sanitizing the HTML markup.

Example

var label = graph.getLabel(cell).replace(/\n/g, "<br>");
var size = graph.getSizeForString(label);

Parameters

textString whose size should be returned.
fontSizeInteger that specifies the font size in pixels.  Default is mxConstants.DEFAULT_FONTSIZE.
fontFamilyString that specifies the name of the font family.  Default is mxConstants.DEFAULT_FONTFAMILY.
textWidthOptional width for text wrapping.

getViewXml

getViewXml: function(graph,
scale,
cells,
x0,
y0)

getScaleForPageCount

getScaleForPageCount: function(pageCount,
graph,
pageFormat,
border)

Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.  The scale is always computed such that it given the given amount or fewer pages in the print output.  See mxPrintPreview for an example.

Parameters

pageCountSpecifies the number of pages in the print output.
graphmxGraph that should be printed.
pageFormatOptional mxRectangle that specifies the page format.  Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT.
borderThe border along each side of every page.

show

show: function(graph,
doc,
x0,
y0,
w,
h)

Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles.  The document is returned.

This function should be called from within the document with the graph.  If you experience problems with missing stylesheets in IE then try adding the domain to the trusted sites.

Parameters

graphmxGraph to be copied.
docDocument where the new graph is created.
x0X-coordinate of the graph view origin.  Default is 0.
y0Y-coordinate of the graph view origin.  Default is 0.
wOptional width of the graph view.
hOptional height of the graph view.

printScreen

printScreen: function(graph)

Prints the specified graph using a new window and the built-in print dialog.

This function should be called from within the document with the graph.

Parameters

graphmxGraph to be printed.

popup

popup: function(content,
isInternalWindow)

Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.

Parameters

contentString that specifies the text to be displayed.
isInternalWindowOptional boolean indicating if an mxWindow should be used instead of a new browser window.  Default is false.

alert

alert: function(message)

Displayss the given alert in a new dialog.  This implementation uses the built-in alert function.  This is used to display validation errors when connections cannot be changed or created.

Parameters

messageString specifying the message to be displayed.

prompt

prompt: function(message,
defaultValue)

Displays the given message in a prompt dialog.  This implementation uses the built-in prompt function.

Parameters

messageString specifying the message to be displayed.
defaultValueOptional string specifying the default value.

confirm

confirm: function(message)

Displays the given message in a confirm dialog.  This implementation uses the built-in confirm function.

Parameters

messageString specifying the message to be displayed.

error

error: function(message,
width,
close,
icon)

Displays the given error message in a new mxWindow of the given width.  If close is true then an additional close button is added to the window.  The optional icon specifies the icon to be used for the window.  Default is mxUtils.errorImage.

Parameters

messageString specifying the message to be displayed.
widthInteger specifying the width of the window.
closeOptional boolean indicating whether to add a close button.
iconOptional icon for the window decoration.

makeDraggable

makeDraggable: function(element,
graphF,
funct,
dragElement,
dx,
dy,
autoscroll,
scalePreview,
highlightDropTargets,
getDropTarget)

Configures the given DOM element to act as a drag source for the specified graph.  Returns a a new mxDragSource.  If <mxDragSource.guideEnabled> is enabled then the x and y arguments must be used in funct to match the preview location.

Example

var funct = function(graph, evt, cell, x, y)
{
  if (graph.canImportCell(cell))
  {
    var parent = graph.getDefaultParent();
    var vertex = null;

    graph.getModel().beginUpdate();
    try
    {
      vertex = graph.insertVertex(parent, null, 'Hello', x, y, 80, 30);
    }
    finally
    {
      graph.getModel().endUpdate();
    }

    graph.setSelectionCell(vertex);
  }
}

var img = document.createElement('img');
img.setAttribute('src', 'editors/images/rectangle.gif');
img.style.position = 'absolute';
img.style.left = '0px';
img.style.top = '0px';
img.style.width = '16px';
img.style.height = '16px';

var dragImage = img.cloneNode(true);
dragImage.style.width = '32px';
dragImage.style.height = '32px';
mxUtils.makeDraggable(img, graph, funct, dragImage);
document.body.appendChild(img);

Parameters

elementDOM element to make draggable.
graphFmxGraph that acts as the drop target or a function that takes a mouse event and returns the current mxGraph.
functFunction to execute on a successful drop.
dragElementOptional DOM node to be used for the drag preview.
dxOptional horizontal offset between the cursor and the drag preview.
dyOptional vertical offset between the cursor and the drag preview.
autoscrollOptional boolean that specifies if autoscroll should be used.  Default is mxGraph.autoscroll.
scalePreviewOptional boolean that specifies if the preview element should be scaled according to the graph scale.  If this is true, then the offsets will also be scaled.  Default is false.
highlightDropTargetsOptional boolean that specifies if dropTargets should be highlighted.  Default is true.
getDropTargetOptional function to return the drop target for a given location (x, y).  Default is mxGraph.getCellAt.

mxConstants

Defines various global constants.

Summary
Variables
DEFAULT_HOTSPOTDefines the portion of the cell which is to be used as a connectable region.
MIN_HOTSPOT_SIZEDefines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
MAX_HOTSPOT_SIZEDefines the maximum size in pixels of the portion of the cell which is to be used as a connectable region.
RENDERING_HINT_EXACTDefines the exact rendering hint.
RENDERING_HINT_FASTERDefines the faster rendering hint.
RENDERING_HINT_FASTESTDefines the fastest rendering hint.
DIALECT_SVGDefines the SVG display dialect name.
DIALECT_VMLDefines the VML display dialect name.
DIALECT_MIXEDHTMLDefines the mixed HTML display dialect name.
DIALECT_PREFERHTMLDefines the preferred HTML display dialect name.
DIALECT_STRICTHTMLDefines the strict HTML display dialect.
NS_SVGDefines the SVG namespace.
NS_XHTMLDefines the XHTML namespace.
NS_XLINKDefines the XLink namespace.
SHADOWCOLORDefines the color to be used to draw shadows in shapes and windows.
VML_SHADOWCOLORUsed for shadow color in filters where transparency is not supported (Microsoft Internet Explorer).
SHADOW_OFFSET_XSpecifies the x-offset of the shadow.
SHADOW_OFFSET_YSpecifies the y-offset of the shadow.
SHADOW_OPACITYDefines the opacity for shadows.
NODETYPE_ELEMENTDOM node of type ELEMENT.
NODETYPE_ATTRIBUTEDOM node of type ATTRIBUTE.
NODETYPE_TEXTDOM node of type TEXT.
NODETYPE_CDATADOM node of type CDATA.
NODETYPE_ENTITY_REFERENCEDOM node of type ENTITY_REFERENCE.
NODETYPE_ENTITYDOM node of type ENTITY.
NODETYPE_PROCESSING_INSTRUCTIONDOM node of type PROCESSING_INSTRUCTION.
NODETYPE_COMMENTDOM node of type COMMENT.
NODETYPE_DOCUMENTDOM node of type DOCUMENT.
NODETYPE_DOCUMENTTYPEDOM node of type DOCUMENTTYPE.
NODETYPE_DOCUMENT_FRAGMENTDOM node of type DOCUMENT_FRAGMENT.
NODETYPE_NOTATIONDOM node of type NOTATION.
TOOLTIP_VERTICAL_OFFSETDefines the vertical offset for the tooltip.
DEFAULT_VALID_COLORSpecifies the default valid color.
DEFAULT_INVALID_COLORSpecifies the default invalid color.
OUTLINE_HIGHLIGHT_COLORSpecifies the default highlight color for shape outlines.
OUTLINE_HIGHLIGHT_COLORDefines the strokewidth to be used for shape outlines.
HIGHLIGHT_STROKEWIDTHDefines the strokewidth to be used for the highlights.
CONSTRAINT_HIGHLIGHT_SIZESize of the constraint highlight (in px).
HIGHLIGHT_OPACITYOpacity (in %) used for the highlights (including outline).
CURSOR_MOVABLE_VERTEXDefines the cursor for a movable vertex.
CURSOR_MOVABLE_EDGEDefines the cursor for a movable edge.
CURSOR_LABEL_HANDLEDefines the cursor for a movable label.
CURSOR_TERMINAL_HANDLEDefines the cursor for a terminal handle.
CURSOR_BEND_HANDLEDefines the cursor for a movable bend.
CURSOR_VIRTUAL_BEND_HANDLEDefines the cursor for a movable bend.
CURSOR_CONNECTDefines the cursor for a connectable state.
HIGHLIGHT_COLORDefines the color to be used for the cell highlighting.
TARGET_HIGHLIGHT_COLORDefines the color to be used for highlighting a target cell for a new or changed connection.
INVALID_CONNECT_TARGET_COLORDefines the color to be used for highlighting a invalid target cells for a new or changed connections.
DROP_TARGET_COLORDefines the color to be used for the highlighting target parent cells (for drag and drop).
VALID_COLORDefines the color to be used for the coloring valid connection previews.
INVALID_COLORDefines the color to be used for the coloring invalid connection previews.
EDGE_SELECTION_COLORDefines the color to be used for the selection border of edges.
VERTEX_SELECTION_COLORDefines the color to be used for the selection border of vertices.
VERTEX_SELECTION_STROKEWIDTHDefines the strokewidth to be used for vertex selections.
EDGE_SELECTION_STROKEWIDTHDefines the strokewidth to be used for edge selections.
SELECTION_DASHEDDefines the dashed state to be used for the vertex selection border.
SELECTION_DASHEDDefines the dashed state to be used for the edge selection border.
GUIDE_COLORDefines the color to be used for the guidelines in mxGraphHandler.
GUIDE_STROKEWIDTHDefines the strokewidth to be used for the guidelines in mxGraphHandler.
OUTLINE_COLORDefines the color to be used for the outline rectangle border.
OUTLINE_STROKEWIDTHDefines the strokewidth to be used for the outline rectangle stroke width.
HANDLE_SIZEDefines the default size for handles.
LABEL_HANDLE_SIZEDefines the default size for label handles.
HANDLE_FILLCOLORDefines the color to be used for the handle fill color.
HANDLE_STROKECOLORDefines the color to be used for the handle stroke color.
LABEL_HANDLE_FILLCOLORDefines the color to be used for the label handle fill color.
CONNECT_HANDLE_FILLCOLORDefines the color to be used for the connect handle fill color.
LOCKED_HANDLE_FILLCOLORDefines the color to be used for the locked handle fill color.
OUTLINE_HANDLE_FILLCOLORDefines the color to be used for the outline sizer fill color.
OUTLINE_HANDLE_STROKECOLORDefines the color to be used for the outline sizer stroke color.
DEFAULT_FONTFAMILYDefines the default family for all fonts.
DEFAULT_FONTSIZEDefines the default size (in px).
DEFAULT_TEXT_DIRECTIONDefines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style.
LINE_HEIGHTDefines the default line height for text labels.
WORD_WRAPDefines the CSS value for the word-wrap property.
ABSOLUTE_LINE_HEIGHTSpecifies if absolute line heights should be used (px) in CSS.
DEFAULT_FONTSTYLEDefines the default style for all fonts.
DEFAULT_STARTSIZEDefines the default start size for swimlanes.
DEFAULT_MARKERSIZEDefines the default size for all markers.
DEFAULT_IMAGESIZEDefines the default width and height for images used in the label shape.
ENTITY_SEGMENTDefines the length of the horizontal segment of an Entity Relation.
RECTANGLE_ROUNDING_FACTORDefines the rounding factor for rounded rectangles in percent between 0 and 1.
LINE_ARCSIZEDefines the size of the arcs for rounded edges.
ARROW_SPACINGDefines the spacing between the arrow shape and its terminals.
ARROW_WIDTHDefines the width of the arrow shape.
ARROW_SIZEDefines the size of the arrowhead in the arrow shape.
PAGE_FORMAT_A4_PORTRAITDefines the rectangle for the A4 portrait page format.
PAGE_FORMAT_A4_PORTRAITDefines the rectangle for the A4 portrait page format.
PAGE_FORMAT_LETTER_PORTRAITDefines the rectangle for the Letter portrait page format.
PAGE_FORMAT_LETTER_PORTRAITDefines the rectangle for the Letter portrait page format.
NONEDefines the value for none.
STYLE_PERIMETERDefines the key for the perimeter style.
STYLE_SOURCE_PORTDefines the ID of the cell that should be used for computing the perimeter point of the source for an edge.
STYLE_TARGET_PORTDefines the ID of the cell that should be used for computing the perimeter point of the target for an edge.
STYLE_PORT_CONSTRAINTDefines the direction(s) that edges are allowed to connect to cells in.
STYLE_PORT_CONSTRAINT_ROTATIONDefine whether port constraint directions are rotated with vertex rotation.
STYLE_SOURCE_PORT_CONSTRAINTDefines the direction(s) that edges are allowed to connect to sources in.
STYLE_TARGET_PORT_CONSTRAINTDefines the direction(s) that edges are allowed to connect to targets in.
STYLE_OPACITYDefines the key for the opacity style.
STYLE_FILL_OPACITYDefines the key for the fill opacity style.
STYLE_STROKE_OPACITYDefines the key for the stroke opacity style.
STYLE_TEXT_OPACITYDefines the key for the text opacity style.
STYLE_TEXT_DIRECTIONDefines the key for the text direction style.
STYLE_OVERFLOWDefines the key for the overflow style.
STYLE_ORTHOGONALDefines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location.
STYLE_EXIT_XDefines the key for the horizontal relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_YDefines the key for the vertical relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_DXDefines the key for the horizontal offset of the connection point of an edge with its source terminal.
STYLE_EXIT_DYDefines the key for the vertical offset of the connection point of an edge with its source terminal.
STYLE_EXIT_PERIMETERDefines if the perimeter should be used to find the exact entry point along the perimeter of the source.
STYLE_ENTRY_XDefines the key for the horizontal relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_YDefines the key for the vertical relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_DXDefines the key for the horizontal offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_DYDefines the key for the vertical offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_PERIMETERDefines if the perimeter should be used to find the exact entry point along the perimeter of the target.
STYLE_WHITE_SPACEDefines the key for the white-space style.
STYLE_ROTATIONDefines the key for the rotation style.
STYLE_FILLCOLORDefines the key for the fill color.
STYLE_POINTER_EVENTSSpecifies if pointer events should be fired on transparent backgrounds.
STYLE_SWIMLANE_FILLCOLORDefines the key for the fill color of the swimlane background.
STYLE_MARGINDefines the key for the margin between the ellipses in the double ellipse shape.
STYLE_GRADIENTCOLORDefines the key for the gradient color.
STYLE_GRADIENT_DIRECTIONDefines the key for the gradient direction.
STYLE_STROKECOLORDefines the key for the strokeColor style.
STYLE_SEPARATORCOLORDefines the key for the separatorColor style.
STYLE_STROKEWIDTHDefines the key for the strokeWidth style.
STYLE_ALIGNDefines the key for the align style.
STYLE_VERTICAL_ALIGNDefines the key for the verticalAlign style.
STYLE_LABEL_WIDTHDefines the key for the width of the label if the label position is not center.
STYLE_LABEL_POSITIONDefines the key for the horizontal label position of vertices.
STYLE_VERTICAL_LABEL_POSITIONDefines the key for the vertical label position of vertices.
STYLE_IMAGE_ASPECTDefines the key for the image aspect style.
STYLE_IMAGE_ALIGNDefines the key for the align style.
STYLE_IMAGE_VERTICAL_ALIGNDefines the key for the verticalAlign style.
STYLE_GLASSDefines the key for the glass style.
STYLE_IMAGEDefines the key for the image style.
STYLE_IMAGE_WIDTHDefines the key for the imageWidth style.
STYLE_IMAGE_HEIGHTDefines the key for the imageHeight style.
STYLE_IMAGE_BACKGROUNDDefines the key for the image background color.
STYLE_IMAGE_BORDERDefines the key for the image border color.
STYLE_FLIPHDefines the key for the horizontal image flip.
STYLE_FLIPVDefines the key for the vertical flip.
STYLE_NOLABELDefines the key for the noLabel style.
STYLE_NOEDGESTYLEDefines the key for the noEdgeStyle style.
STYLE_LABEL_BACKGROUNDCOLORDefines the key for the label background color.
STYLE_LABEL_BORDERCOLORDefines the key for the label border color.
STYLE_LABEL_PADDINGDefines the key for the label padding, ie.
STYLE_INDICATOR_SHAPEDefines the key for the indicator shape used within an mxLabel.
STYLE_INDICATOR_IMAGEDefines the key for the indicator image used within an mxLabel.
STYLE_INDICATOR_COLORDefines the key for the indicatorColor style.
STYLE_INDICATOR_STROKECOLORDefines the key for the indicator stroke color in mxLabel.
STYLE_INDICATOR_GRADIENTCOLORDefines the key for the indicatorGradientColor style.
STYLE_INDICATOR_SPACINGThe defines the key for the spacing between the label and the indicator in mxLabel.
STYLE_INDICATOR_WIDTHDefines the key for the indicator width.
STYLE_INDICATOR_HEIGHTDefines the key for the indicator height.
STYLE_INDICATOR_DIRECTIONDefines the key for the indicatorDirection style.
STYLE_SHADOWDefines the key for the shadow style.
STYLE_SEGMENTDefines the key for the segment style.
STYLE_ENDARROWDefines the key for the end arrow marker.
STYLE_STARTARROWDefines the key for the start arrow marker.
STYLE_ENDSIZEDefines the key for the endSize style.
STYLE_STARTSIZEDefines the key for the startSize style.
STYLE_SWIMLANE_LINEDefines the key for the swimlaneLine style.
STYLE_ENDFILLDefines the key for the endFill style.
STYLE_STARTFILLDefines the key for the startFill style.
STYLE_DASHEDDefines the key for the dashed style.
STYLE_FIX_DASHDefines the key for the fixDash style.
STYLE_ROUNDEDDefines the key for the rounded style.
STYLE_CURVEDDefines the key for the curved style.
STYLE_ARCSIZEDefines the rounding factor for a rounded rectangle in percent (without the percent sign).
STYLE_ABSOLUTE_ARCSIZEDefines the key for the absolute arc size style.
STYLE_SOURCE_PERIMETER_SPACINGDefines the key for the source perimeter spacing.
STYLE_TARGET_PERIMETER_SPACINGDefines the key for the target perimeter spacing.
STYLE_PERIMETER_SPACINGDefines the key for the perimeter spacing.
STYLE_SPACINGDefines the key for the spacing.
STYLE_SPACING_TOPDefines the key for the spacingTop style.
STYLE_SPACING_LEFTDefines the key for the spacingLeft style.
STYLE_SPACING_BOTTOMDefines the key for the spacingBottom style The value represents the spacing, in pixels, added to the bottom side of a label in a vertex (style applies to vertices only).
STYLE_SPACING_RIGHTDefines the key for the spacingRight style The value represents the spacing, in pixels, added to the right side of a label in a vertex (style applies to vertices only).
STYLE_HORIZONTALDefines the key for the horizontal style.
STYLE_DIRECTIONDefines the key for the direction style.
STYLE_ANCHOR_POINT_DIRECTIONDefines the key for the anchorPointDirection style.
STYLE_ELBOWDefines the key for the elbow style.
STYLE_FONTCOLORDefines the key for the fontColor style.
STYLE_FONTFAMILYDefines the key for the fontFamily style.
STYLE_FONTSIZEDefines the key for the fontSize style (in px).
STYLE_FONTSTYLEDefines the key for the fontStyle style.
STYLE_ASPECTDefines the key for the aspect style.
STYLE_AUTOSIZEDefines the key for the autosize style.
STYLE_FOLDABLEDefines the key for the foldable style.
STYLE_EDITABLEDefines the key for the editable style.
STYLE_BACKGROUND_OUTLINEDefines the key for the backgroundOutline style.
STYLE_BENDABLEDefines the key for the bendable style.
STYLE_MOVABLEDefines the key for the movable style.
STYLE_RESIZABLEDefines the key for the resizable style.
STYLE_RESIZE_WIDTHDefines the key for the resizeWidth style.
STYLE_RESIZE_WIDTHDefines the key for the resizeHeight style.
STYLE_ROTATABLEDefines the key for the rotatable style.
STYLE_CLONEABLEDefines the key for the cloneable style.
STYLE_DELETABLEDefines the key for the deletable style.
STYLE_SHAPEDefines the key for the shape.
STYLE_EDGEDefines the key for the edge style.
STYLE_JETTY_SIZEDefines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_SOURCE_JETTY_SIZEDefines the key for the jetty size in mxEdgeStyle.OrthConnector.
targetJettySizeDefines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_LOOPDefines the key for the loop style.
STYLE_ORTHOGONAL_LOOPDefines the key for the orthogonal loop style.
STYLE_ROUTING_CENTER_XDefines the key for the horizontal routing center.
STYLE_ROUTING_CENTER_YDefines the key for the vertical routing center.
FONT_BOLDConstant for bold fonts.
FONT_ITALICConstant for italic fonts.
FONT_UNDERLINEConstant for underlined fonts.
SHAPE_RECTANGLEName under which mxRectangleShape is registered in mxCellRenderer.
SHAPE_ELLIPSEName under which mxEllipse is registered in mxCellRenderer.
SHAPE_DOUBLE_ELLIPSEName under which mxDoubleEllipse is registered in mxCellRenderer.
SHAPE_RHOMBUSName under which mxRhombus is registered in mxCellRenderer.
SHAPE_LINEName under which mxLine is registered in mxCellRenderer.
SHAPE_IMAGEName under which mxImageShape is registered in mxCellRenderer.
SHAPE_ARROWName under which mxArrow is registered in mxCellRenderer.
SHAPE_ARROW_CONNECTORName under which mxArrowConnector is registered in mxCellRenderer.
SHAPE_LABELName under which mxLabel is registered in mxCellRenderer.
SHAPE_CYLINDERName under which mxCylinder is registered in mxCellRenderer.
SHAPE_SWIMLANEName under which mxSwimlane is registered in mxCellRenderer.
SHAPE_CONNECTORName under which mxConnector is registered in mxCellRenderer.
SHAPE_ACTORName under which mxActor is registered in mxCellRenderer.
SHAPE_CLOUDName under which mxCloud is registered in mxCellRenderer.
SHAPE_TRIANGLEName under which mxTriangle is registered in mxCellRenderer.
SHAPE_HEXAGONName under which mxHexagon is registered in mxCellRenderer.
ARROW_CLASSICConstant for classic arrow markers.
ARROW_CLASSIC_THINConstant for thin classic arrow markers.
ARROW_BLOCKConstant for block arrow markers.
ARROW_BLOCK_THINConstant for thin block arrow markers.
ARROW_OPENConstant for open arrow markers.
ARROW_OPEN_THINConstant for thin open arrow markers.
ARROW_OVALConstant for oval arrow markers.
ARROW_DIAMONDConstant for diamond arrow markers.
ARROW_DIAMOND_THINConstant for thin diamond arrow markers.
ALIGN_LEFTConstant for left horizontal alignment.
ALIGN_CENTERConstant for center horizontal alignment.
ALIGN_RIGHTConstant for right horizontal alignment.
ALIGN_TOPConstant for top vertical alignment.
ALIGN_MIDDLEConstant for middle vertical alignment.
ALIGN_BOTTOMConstant for bottom vertical alignment.
DIRECTION_NORTHConstant for direction north.
DIRECTION_SOUTHConstant for direction south.
DIRECTION_EASTConstant for direction east.
DIRECTION_WESTConstant for direction west.
TEXT_DIRECTION_DEFAULTConstant for text direction default.
TEXT_DIRECTION_AUTOConstant for text direction automatic.
TEXT_DIRECTION_LTRConstant for text direction left to right.
TEXT_DIRECTION_RTLConstant for text direction right to left.
DIRECTION_MASK_NONEConstant for no direction.
DIRECTION_MASK_WESTBitwise mask for west direction.
DIRECTION_MASK_NORTHBitwise mask for north direction.
DIRECTION_MASK_SOUTHBitwise mask for south direction.
DIRECTION_MASK_EASTBitwise mask for east direction.
DIRECTION_MASK_ALLBitwise mask for all directions.
ELBOW_VERTICALConstant for elbow vertical.
ELBOW_HORIZONTALConstant for elbow horizontal.
EDGESTYLE_ELBOWName of the elbow edge style.
EDGESTYLE_ENTITY_RELATIONName of the entity relation edge style.
EDGESTYLE_LOOPName of the loop edge style.
EDGESTYLE_SIDETOSIDEName of the side to side edge style.
EDGESTYLE_TOPTOBOTTOMName of the top to bottom edge style.
EDGESTYLE_ORTHOGONALName of the generic orthogonal edge style.
EDGESTYLE_SEGMENTName of the generic segment edge style.
PERIMETER_ELLIPSEName of the ellipse perimeter.
PERIMETER_RECTANGLEName of the rectangle perimeter.
PERIMETER_RHOMBUSName of the rhombus perimeter.
PERIMETER_HEXAGONName of the hexagon perimeter.
PERIMETER_TRIANGLEName of the triangle perimeter.

Variables

DEFAULT_HOTSPOT

Defines the portion of the cell which is to be used as a connectable region.  Default is 0.3.  Possible values are 0 < x <= 1.

MIN_HOTSPOT_SIZE

Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.  Default is 8.

MAX_HOTSPOT_SIZE

Defines the maximum size in pixels of the portion of the cell which is to be used as a connectable region.  Use 0 for no maximum.  Default is 0.

RENDERING_HINT_EXACT

Defines the exact rendering hint.

RENDERING_HINT_FASTER

Defines the faster rendering hint.

RENDERING_HINT_FASTEST

Defines the fastest rendering hint.

DIALECT_SVG

Defines the SVG display dialect name.

DIALECT_VML

Defines the VML display dialect name.

DIALECT_MIXEDHTML

Defines the mixed HTML display dialect name.

DIALECT_PREFERHTML

Defines the preferred HTML display dialect name.

DIALECT_STRICTHTML

Defines the strict HTML display dialect.

NS_SVG

Defines the SVG namespace.

NS_XHTML

Defines the XHTML namespace.

NS_XLINK

Defines the XLink namespace.

SHADOWCOLOR

Defines the color to be used to draw shadows in shapes and windows.  Default is gray.

VML_SHADOWCOLOR

Used for shadow color in filters where transparency is not supported (Microsoft Internet Explorer).  Default is gray.

SHADOW_OFFSET_X

Specifies the x-offset of the shadow.  Default is 2.

SHADOW_OFFSET_Y

Specifies the y-offset of the shadow.  Default is 3.

SHADOW_OPACITY

Defines the opacity for shadows.  Default is 1.

NODETYPE_ELEMENT

DOM node of type ELEMENT.

NODETYPE_ATTRIBUTE

DOM node of type ATTRIBUTE.

NODETYPE_TEXT

DOM node of type TEXT.

NODETYPE_CDATA

DOM node of type CDATA.

NODETYPE_ENTITY_REFERENCE

DOM node of type ENTITY_REFERENCE.

NODETYPE_ENTITY

DOM node of type ENTITY.

NODETYPE_PROCESSING_INSTRUCTION

DOM node of type PROCESSING_INSTRUCTION.

NODETYPE_COMMENT

DOM node of type COMMENT.

NODETYPE_DOCUMENT

DOM node of type DOCUMENT.

NODETYPE_DOCUMENTTYPE

DOM node of type DOCUMENTTYPE.

NODETYPE_DOCUMENT_FRAGMENT

DOM node of type DOCUMENT_FRAGMENT.

NODETYPE_NOTATION

DOM node of type NOTATION.

TOOLTIP_VERTICAL_OFFSET

Defines the vertical offset for the tooltip.  Default is 16.

DEFAULT_VALID_COLOR

Specifies the default valid color.  Default is #0000FF.

DEFAULT_INVALID_COLOR

Specifies the default invalid color.  Default is #FF0000.

OUTLINE_HIGHLIGHT_COLOR

Specifies the default highlight color for shape outlines.  Default is #0000FF.  This is used in mxEdgeHandler.

OUTLINE_HIGHLIGHT_COLOR

Defines the strokewidth to be used for shape outlines.  Default is 5.  This is used in mxEdgeHandler.

HIGHLIGHT_STROKEWIDTH

Defines the strokewidth to be used for the highlights.  Default is 3.

CONSTRAINT_HIGHLIGHT_SIZE

Size of the constraint highlight (in px).  Default is 2.

HIGHLIGHT_OPACITY

Opacity (in %) used for the highlights (including outline).  Default is 100.

CURSOR_MOVABLE_VERTEX

Defines the cursor for a movable vertex.  Default is ‘move’.

CURSOR_MOVABLE_EDGE

Defines the cursor for a movable edge.  Default is ‘move’.

CURSOR_LABEL_HANDLE

Defines the cursor for a movable label.  Default is ‘default’.

CURSOR_TERMINAL_HANDLE

Defines the cursor for a terminal handle.  Default is ‘pointer’.

CURSOR_BEND_HANDLE

Defines the cursor for a movable bend.  Default is ‘crosshair’.

CURSOR_VIRTUAL_BEND_HANDLE

Defines the cursor for a movable bend.  Default is ‘crosshair’.

CURSOR_CONNECT

Defines the cursor for a connectable state.  Default is ‘pointer’.

HIGHLIGHT_COLOR

Defines the color to be used for the cell highlighting.  Use ‘none’ for no color.  Default is #00FF00.

TARGET_HIGHLIGHT_COLOR

Defines the color to be used for highlighting a target cell for a new or changed connection.  Note that this may be either a source or target terminal in the graph.  Use ‘none’ for no color.  Default is #0000FF.

INVALID_CONNECT_TARGET_COLOR

Defines the color to be used for highlighting a invalid target cells for a new or changed connections.  Note that this may be either a source or target terminal in the graph.  Use ‘none’ for no color.  Default is #FF0000.

DROP_TARGET_COLOR

Defines the color to be used for the highlighting target parent cells (for drag and drop).  Use ‘none’ for no color.  Default is #0000FF.

VALID_COLOR

Defines the color to be used for the coloring valid connection previews.  Use ‘none’ for no color.  Default is #FF0000.

INVALID_COLOR

Defines the color to be used for the coloring invalid connection previews.  Use ‘none’ for no color.  Default is #FF0000.

EDGE_SELECTION_COLOR

Defines the color to be used for the selection border of edges.  Use ‘none’ for no color.  Default is #00FF00.

VERTEX_SELECTION_COLOR

Defines the color to be used for the selection border of vertices.  Use ‘none’ for no color.  Default is #00FF00.

VERTEX_SELECTION_STROKEWIDTH

Defines the strokewidth to be used for vertex selections.  Default is 1.

EDGE_SELECTION_STROKEWIDTH

Defines the strokewidth to be used for edge selections.  Default is 1.

SELECTION_DASHED

Defines the dashed state to be used for the vertex selection border.  Default is true.

SELECTION_DASHED

Defines the dashed state to be used for the edge selection border.  Default is true.

GUIDE_COLOR

Defines the color to be used for the guidelines in mxGraphHandler.  Default is #FF0000.

GUIDE_STROKEWIDTH

Defines the strokewidth to be used for the guidelines in mxGraphHandler.  Default is 1.

OUTLINE_COLOR

Defines the color to be used for the outline rectangle border.  Use ‘none’ for no color.  Default is #0099FF.

OUTLINE_STROKEWIDTH

Defines the strokewidth to be used for the outline rectangle stroke width.  Default is 3.

HANDLE_SIZE

Defines the default size for handles.  Default is 6.

LABEL_HANDLE_SIZE

Defines the default size for label handles.  Default is 4.

HANDLE_FILLCOLOR

Defines the color to be used for the handle fill color.  Use ‘none’ for no color.  Default is #00FF00 (green).

HANDLE_STROKECOLOR

Defines the color to be used for the handle stroke color.  Use ‘none’ for no color.  Default is black.

LABEL_HANDLE_FILLCOLOR

Defines the color to be used for the label handle fill color.  Use ‘none’ for no color.  Default is yellow.

CONNECT_HANDLE_FILLCOLOR

Defines the color to be used for the connect handle fill color.  Use ‘none’ for no color.  Default is #0000FF (blue).

LOCKED_HANDLE_FILLCOLOR

Defines the color to be used for the locked handle fill color.  Use ‘none’ for no color.  Default is #FF0000 (red).

OUTLINE_HANDLE_FILLCOLOR

Defines the color to be used for the outline sizer fill color.  Use ‘none’ for no color.  Default is #00FFFF.

OUTLINE_HANDLE_STROKECOLOR

Defines the color to be used for the outline sizer stroke color.  Use ‘none’ for no color.  Default is #0033FF.

DEFAULT_FONTFAMILY

Defines the default family for all fonts.  Default is Arial,Helvetica.

DEFAULT_FONTSIZE

Defines the default size (in px).  Default is 11.

DEFAULT_TEXT_DIRECTION

Defines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style.  Default value is an empty string which means the default system setting is used and no direction is set.

LINE_HEIGHT

Defines the default line height for text labels.  Default is 1.2.

WORD_WRAP

Defines the CSS value for the word-wrap property.  Default is “normal”.  Change this to “break-word” to allow long words to be able to be broken and wrap onto the next line.

ABSOLUTE_LINE_HEIGHT

Specifies if absolute line heights should be used (px) in CSS.  Default is false.  Set this to true for backwards compatibility.

DEFAULT_FONTSTYLE

Defines the default style for all fonts.  Default is 0.  This can be set to any combination of font styles as follows.

mxConstants.DEFAULT_FONTSTYLE = mxConstants.FONT_BOLD | mxConstants.FONT_ITALIC;

DEFAULT_STARTSIZE

Defines the default start size for swimlanes.  Default is 40.

DEFAULT_MARKERSIZE

Defines the default size for all markers.  Default is 6.

DEFAULT_IMAGESIZE

Defines the default width and height for images used in the label shape.  Default is 24.

ENTITY_SEGMENT

Defines the length of the horizontal segment of an Entity Relation.  This can be overridden using mxConstants.STYLE_SEGMENT style.  Default is 30.

RECTANGLE_ROUNDING_FACTOR

Defines the rounding factor for rounded rectangles in percent between 0 and 1.  Values should be smaller than 0.5.  Default is 0.15.

LINE_ARCSIZE

Defines the size of the arcs for rounded edges.  Default is 20.

ARROW_SPACING

Defines the spacing between the arrow shape and its terminals.  Default is 0.

ARROW_WIDTH

Defines the width of the arrow shape.  Default is 30.

ARROW_SIZE

Defines the size of the arrowhead in the arrow shape.  Default is 30.

PAGE_FORMAT_A4_PORTRAIT

Defines the rectangle for the A4 portrait page format.  The dimensions of this page format are 826x1169 pixels.

PAGE_FORMAT_A4_PORTRAIT

Defines the rectangle for the A4 portrait page format.  The dimensions of this page format are 826x1169 pixels.

PAGE_FORMAT_LETTER_PORTRAIT

Defines the rectangle for the Letter portrait page format.  The dimensions of this page format are 850x1100 pixels.

PAGE_FORMAT_LETTER_PORTRAIT

Defines the rectangle for the Letter portrait page format.  The dimensions of this page format are 850x1100 pixels.

NONE

Defines the value for none.  Default is “none”.

STYLE_PERIMETER

Defines the key for the perimeter style.  This is a function that defines the perimeter around a particular shape.  Possible values are the functions defined in mxPerimeter.  Alternatively, the constants in this class that start with “PERIMETER_” may be used to access perimeter styles in mxStyleRegistry.  Value is “perimeter”.

STYLE_SOURCE_PORT

Defines the ID of the cell that should be used for computing the perimeter point of the source for an edge.  This allows for graphically connecting to a cell while keeping the actual terminal of the edge.  Value is “sourcePort”.

STYLE_TARGET_PORT

Defines the ID of the cell that should be used for computing the perimeter point of the target for an edge.  This allows for graphically connecting to a cell while keeping the actual terminal of the edge.  Value is “targetPort”.

STYLE_PORT_CONSTRAINT

Defines the direction(s) that edges are allowed to connect to cells in.  Possible values are “DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST” and “DIRECTION_WEST”.  Value is “portConstraint”.

STYLE_PORT_CONSTRAINT_ROTATION

Define whether port constraint directions are rotated with vertex rotation.  0 (default) causes port constraints to remain absolute, relative to the graph, 1 causes the constraints to rotate with the vertex.  Value is “portConstraintRotation”.

STYLE_SOURCE_PORT_CONSTRAINT

Defines the direction(s) that edges are allowed to connect to sources in.  Possible values are “DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST” and “DIRECTION_WEST”.  Value is “sourcePortConstraint”.

STYLE_TARGET_PORT_CONSTRAINT

Defines the direction(s) that edges are allowed to connect to targets in.  Possible values are “DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST” and “DIRECTION_WEST”.  Value is “targetPortConstraint”.

STYLE_OPACITY

Defines the key for the opacity style.  The type of the value is numeric and the possible range is 0-100.  Value is “opacity”.

STYLE_FILL_OPACITY

Defines the key for the fill opacity style.  The type of the value is numeric and the possible range is 0-100.  Value is “fillOpacity”.

STYLE_STROKE_OPACITY

Defines the key for the stroke opacity style.  The type of the value is numeric and the possible range is 0-100.  Value is “strokeOpacity”.

STYLE_TEXT_OPACITY

Defines the key for the text opacity style.  The type of the value is numeric and the possible range is 0-100.  Value is “textOpacity”.

STYLE_TEXT_DIRECTION

Defines the key for the text direction style.  Possible values are “TEXT_DIRECTION_DEFAULT, TEXT_DIRECTION_AUTO, TEXT_DIRECTION_LTR” and “TEXT_DIRECTION_RTL”.  Value is “textDirection”.  The default value for the style is defined in DEFAULT_TEXT_DIRECTION.  It is used is no value is defined for this key in a given style.  This is an experimental style that is currently ignored in the backends.

STYLE_OVERFLOW

Defines the key for the overflow style.  Possible values are ‘visible’, ‘hidden’, ‘fill’ and ‘width’.  The default value is ‘visible’.  This value specifies how overlapping vertex labels are handled.  A value of ‘visible’ will show the complete label.  A value of ‘hidden’ will clip the label so that it does not overlap the vertex bounds.  A value of ‘fill’ will use the vertex bounds and a value of ‘width’ will use the the vertex width for the label.  See mxGraph.isLabelClipped.  Note that the vertical alignment is ignored for overflow fill and for horizontal alignment, left should be used to avoid pixel offsets in Internet Explorer 11 and earlier or if foreignObjects are disabled.  Value is “overflow”.

STYLE_ORTHOGONAL

Defines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location.  Default is false.  This is used in mxGraph.isOrthogonal, which also returns true if the edgeStyle of the edge is an elbow or entity.  Value is “orthogonal”.

STYLE_EXIT_X

Defines the key for the horizontal relative coordinate connection point of an edge with its source terminal.  Value is “exitX”.

STYLE_EXIT_Y

Defines the key for the vertical relative coordinate connection point of an edge with its source terminal.  Value is “exitY”.

STYLE_EXIT_DX

Defines the key for the horizontal offset of the connection point of an edge with its source terminal.  Value is “exitDx”.

STYLE_EXIT_DY

Defines the key for the vertical offset of the connection point of an edge with its source terminal.  Value is “exitDy”.

STYLE_EXIT_PERIMETER

Defines if the perimeter should be used to find the exact entry point along the perimeter of the source.  Possible values are 0 (false) and 1 (true).  Default is 1 (true).  Value is “exitPerimeter”.

STYLE_ENTRY_X

Defines the key for the horizontal relative coordinate connection point of an edge with its target terminal.  Value is “entryX”.

STYLE_ENTRY_Y

Defines the key for the vertical relative coordinate connection point of an edge with its target terminal.  Value is “entryY”.

STYLE_ENTRY_DX

Defines the key for the horizontal offset of the connection point of an edge with its target terminal.  Value is “entryDx”.

STYLE_ENTRY_DY

Defines the key for the vertical offset of the connection point of an edge with its target terminal.  Value is “entryDy”.

STYLE_ENTRY_PERIMETER

Defines if the perimeter should be used to find the exact entry point along the perimeter of the target.  Possible values are 0 (false) and 1 (true).  Default is 1 (true).  Value is “entryPerimeter”.

STYLE_WHITE_SPACE

Defines the key for the white-space style.  Possible values are ‘nowrap’ and ‘wrap’.  The default value is ‘nowrap’.  This value specifies how white-space inside a HTML vertex label should be handled.  A value of ‘nowrap’ means the text will never wrap to the next line until a linefeed is encountered.  A value of ‘wrap’ means text will wrap when necessary.  This style is only used for HTML labels.  See mxGraph.isWrapping.  Value is “whiteSpace”.

STYLE_ROTATION

Defines the key for the rotation style.  The type of the value is numeric and the possible range is 0-360.  Value is “rotation”.

STYLE_FILLCOLOR

Defines the key for the fill color.  Possible values are all HTML color names or HEX codes, as well as special keywords such as ‘swimlane, ‘inherit’ or ‘indicated’ to use the color code of a related cell or the indicator shape.  Value is “fillColor”.

STYLE_POINTER_EVENTS

Specifies if pointer events should be fired on transparent backgrounds.  This style is currently only supported in mxRectangleShape.  Default is true.  Value is “pointerEvents”.  This is typically set to false in groups where the transparent part should allow any underlying cells to be clickable.

STYLE_SWIMLANE_FILLCOLOR

Defines the key for the fill color of the swimlane background.  Possible values are all HTML color names or HEX codes.  Default is no background.  Value is “swimlaneFillColor”.

STYLE_MARGIN

Defines the key for the margin between the ellipses in the double ellipse shape.  Possible values are all positive numbers.  Value is “margin”.

STYLE_GRADIENTCOLOR

Defines the key for the gradient color.  Possible values are all HTML color names or HEX codes, as well as special keywords such as ‘swimlane, ‘inherit’ or ‘indicated’ to use the color code of a related cell or the indicator shape.  This is ignored if no fill color is defined.  Value is “gradientColor”.

STYLE_GRADIENT_DIRECTION

Defines the key for the gradient direction.  Possible values are DIRECTION_EAST, DIRECTION_WEST, DIRECTION_NORTH and DIRECTION_SOUTH.  Default is DIRECTION_SOUTH.  Generally, and by default in mxGraph, gradient painting is done from the value of STYLE_FILLCOLOR to the value of STYLE_GRADIENTCOLOR.  Taking the example of DIRECTION_NORTH, this means STYLE_FILLCOLOR color at the bottom of paint pattern and STYLE_GRADIENTCOLOR at top, with a gradient in-between.  Value is “gradientDirection”.

STYLE_STROKECOLOR

Defines the key for the strokeColor style.  Possible values are all HTML color names or HEX codes, as well as special keywords such as ‘swimlane, ‘inherit’, ‘indicated’ to use the color code of a related cell or the indicator shape or ‘none’ for no color.  Value is “strokeColor”.

STYLE_SEPARATORCOLOR

Defines the key for the separatorColor style.  Possible values are all HTML color names or HEX codes.  This style is only used for SHAPE_SWIMLANE shapes.  Value is “separatorColor”.

STYLE_STROKEWIDTH

Defines the key for the strokeWidth style.  The type of the value is numeric and the possible range is any non-negative value larger or equal to 1.  The value defines the stroke width in pixels.  Note: To hide a stroke use strokeColor none.  Value is “strokeWidth”.

STYLE_ALIGN

Defines the key for the align style.  Possible values are ALIGN_LEFT, ALIGN_CENTER and ALIGN_RIGHT.  This value defines how the lines of the label are horizontally aligned.  ALIGN_LEFT mean label text lines are aligned to left of the label bounds, ALIGN_RIGHT to the right of the label bounds and ALIGN_CENTER means the center of the text lines are aligned in the center of the label bounds.  Note this value doesn’t affect the positioning of the overall label bounds relative to the vertex, to move the label bounds horizontally, use STYLE_LABEL_POSITION.  Value is “align”.

STYLE_VERTICAL_ALIGN

Defines the key for the verticalAlign style.  Possible values are ALIGN_TOP, ALIGN_MIDDLE and ALIGN_BOTTOM.  This value defines how the lines of the label are vertically aligned.  ALIGN_TOP means the topmost label text line is aligned against the top of the label bounds, ALIGN_BOTTOM means the bottom-most label text line is aligned against the bottom of the label bounds and ALIGN_MIDDLE means there is equal spacing between the topmost text label line and the top of the label bounds and the bottom-most text label line and the bottom of the label bounds.  Note this value doesn’t affect the positioning of the overall label bounds relative to the vertex, to move the label bounds vertically, use STYLE_VERTICAL_LABEL_POSITION.  Value is “verticalAlign”.

STYLE_LABEL_WIDTH

Defines the key for the width of the label if the label position is not center.  Value is “labelWidth”.

STYLE_LABEL_POSITION

Defines the key for the horizontal label position of vertices.  Possible values are ALIGN_LEFT, ALIGN_CENTER and ALIGN_RIGHT.  Default is ALIGN_CENTER.  The label align defines the position of the label relative to the cell.  ALIGN_LEFT means the entire label bounds is placed completely just to the left of the vertex, ALIGN_RIGHT means adjust to the right and ALIGN_CENTER means the label bounds are vertically aligned with the bounds of the vertex.  Note this value doesn’t affect the positioning of label within the label bounds, to move the label horizontally within the label bounds, use STYLE_ALIGN.  Value is “labelPosition”.

STYLE_VERTICAL_LABEL_POSITION

Defines the key for the vertical label position of vertices.  Possible values are ALIGN_TOP, ALIGN_BOTTOM and ALIGN_MIDDLE.  Default is ALIGN_MIDDLE.  The label align defines the position of the label relative to the cell.  ALIGN_TOP means the entire label bounds is placed completely just on the top of the vertex, ALIGN_BOTTOM means adjust on the bottom and ALIGN_MIDDLE means the label bounds are horizontally aligned with the bounds of the vertex.  Note this value doesn’t affect the positioning of label within the label bounds, to move the label vertically within the label bounds, use STYLE_VERTICAL_ALIGN.  Value is “verticalLabelPosition”.

STYLE_IMAGE_ASPECT

Defines the key for the image aspect style.  Possible values are 0 (do not preserve aspect) or 1 (keep aspect).  This is only used in mxImageShape.  Default is 1.  Value is “imageAspect”.

STYLE_IMAGE_ALIGN

Defines the key for the align style.  Possible values are ALIGN_LEFT, ALIGN_CENTER and ALIGN_RIGHT.  The value defines how any image in the vertex label is aligned horizontally within the label bounds of a SHAPE_LABEL shape.  Value is “imageAlign”.

STYLE_IMAGE_VERTICAL_ALIGN

Defines the key for the verticalAlign style.  Possible values are ALIGN_TOP, ALIGN_MIDDLE and ALIGN_BOTTOM.  The value defines how any image in the vertex label is aligned vertically within the label bounds of a SHAPE_LABEL shape.  Value is “imageVerticalAlign”.

STYLE_GLASS

Defines the key for the glass style.  Possible values are 0 (disabled) and 1(enabled).  The default value is 0.  This is used in mxLabel.  Value is “glass”.

STYLE_IMAGE

Defines the key for the image style.  Possible values are any image URL, the type of the value is String.  This is the path to the image that is to be displayed within the label of a vertex.  Data URLs should use the following format: data:image/png,xyz where xyz is the base64 encoded data (without the “base64”-prefix).  Note that Data URLs are only supported in modern browsers.  Value is “image”.

STYLE_IMAGE_WIDTH

Defines the key for the imageWidth style.  The type of this value is int, the value is the image width in pixels and must be greater than 0.  Value is “imageWidth”.

STYLE_IMAGE_HEIGHT

Defines the key for the imageHeight style.  The type of this value is int, the value is the image height in pixels and must be greater than 0.  Value is “imageHeight”.

STYLE_IMAGE_BACKGROUND

Defines the key for the image background color.  This style is only used in mxImageShape.  Possible values are all HTML color names or HEX codes.  Value is “imageBackground”.

STYLE_IMAGE_BORDER

Defines the key for the image border color.  This style is only used in mxImageShape.  Possible values are all HTML color names or HEX codes.  Value is “imageBorder”.

STYLE_FLIPH

Defines the key for the horizontal image flip.  This style is only used in mxImageShape.  Possible values are 0 and 1.  Default is 0.  Value is “flipH”.

STYLE_FLIPV

Defines the key for the vertical flip.  Possible values are 0 and 1.  Default is 0.  Value is “flipV”.

STYLE_NOLABEL

Defines the key for the noLabel style.  If this is true then no label is visible for a given cell.  Possible values are true or false (1 or 0).  Default is false.  Value is “noLabel”.

STYLE_NOEDGESTYLE

Defines the key for the noEdgeStyle style.  If this is true then no edge style is applied for a given edge.  Possible values are true or false (1 or 0).  Default is false.  Value is “noEdgeStyle”.

STYLE_LABEL_BACKGROUNDCOLOR

Defines the key for the label background color.  Possible values are all HTML color names or HEX codes.  Value is “labelBackgroundColor”.

STYLE_LABEL_BORDERCOLOR

Defines the key for the label border color.  Possible values are all HTML color names or HEX codes.  Value is “labelBorderColor”.

STYLE_LABEL_PADDING

Defines the key for the label padding, ie. the space between the label border and the label.  Value is “labelPadding”.

STYLE_INDICATOR_SHAPE

Defines the key for the indicator shape used within an mxLabel.  Possible values are all SHAPE_* constants or the names of any new shapes.  The indicatorShape has precedence over the indicatorImage.  Value is “indicatorShape”.

STYLE_INDICATOR_IMAGE

Defines the key for the indicator image used within an mxLabel.  Possible values are all image URLs.  The indicatorShape has precedence over the indicatorImage.  Value is “indicatorImage”.

STYLE_INDICATOR_COLOR

Defines the key for the indicatorColor style.  Possible values are all HTML color names or HEX codes, as well as the special ‘swimlane’ keyword to refer to the color of the parent swimlane if one exists.  Value is “indicatorColor”.

STYLE_INDICATOR_STROKECOLOR

Defines the key for the indicator stroke color in mxLabel.  Possible values are all color codes.  Value is “indicatorStrokeColor”.

STYLE_INDICATOR_GRADIENTCOLOR

Defines the key for the indicatorGradientColor style.  Possible values are all HTML color names or HEX codes.  This style is only supported in SHAPE_LABEL shapes.  Value is “indicatorGradientColor”.

STYLE_INDICATOR_SPACING

The defines the key for the spacing between the label and the indicator in mxLabel.  Possible values are in pixels.  Value is “indicatorSpacing”.

STYLE_INDICATOR_WIDTH

Defines the key for the indicator width.  Possible values start at 0 (in pixels).  Value is “indicatorWidth”.

STYLE_INDICATOR_HEIGHT

Defines the key for the indicator height.  Possible values start at 0 (in pixels).  Value is “indicatorHeight”.

STYLE_INDICATOR_DIRECTION

Defines the key for the indicatorDirection style.  The direction style is used to specify the direction of certain shapes (eg.  mxTriangle).  Possible values are DIRECTION_EAST (default), DIRECTION_WEST, DIRECTION_NORTH and DIRECTION_SOUTH.  Value is “indicatorDirection”.

STYLE_SHADOW

Defines the key for the shadow style.  The type of the value is Boolean.  Value is “shadow”.

STYLE_SEGMENT

Defines the key for the segment style.  The type of this value is float and the value represents the size of the horizontal segment of the entity relation style.  Default is ENTITY_SEGMENT.  Value is “segment”.

STYLE_ENDARROW

Defines the key for the end arrow marker.  Possible values are all constants with an ARROW-prefix.  This is only used in mxConnector.  Value is “endArrow”.

Example

style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;

STYLE_STARTARROW

Defines the key for the start arrow marker.  Possible values are all constants with an ARROW-prefix.  This is only used in mxConnector.  See STYLE_ENDARROW.  Value is “startArrow”.

STYLE_ENDSIZE

Defines the key for the endSize style.  The type of this value is numeric and the value represents the size of the end marker in pixels.  Value is “endSize”.

STYLE_STARTSIZE

Defines the key for the startSize style.  The type of this value is numeric and the value represents the size of the start marker or the size of the swimlane title region depending on the shape it is used for.  Value is “startSize”.

STYLE_SWIMLANE_LINE

Defines the key for the swimlaneLine style.  This style specifies whether the line between the title regio of a swimlane should be visible.  Use 0 for hidden or 1 (default) for visible.  Value is “swimlaneLine”.

STYLE_ENDFILL

Defines the key for the endFill style.  Use 0 for no fill or 1 (default) for fill.  (This style is only exported via mxImageExport.)  Value is “endFill”.

STYLE_STARTFILL

Defines the key for the startFill style.  Use 0 for no fill or 1 (default) for fill.  (This style is only exported via mxImageExport.)  Value is “startFill”.

STYLE_DASHED

Defines the key for the dashed style.  Use 0 (default) for non-dashed or 1 for dashed.  Value is “dashed”.

STYLE_FIX_DASH

Defines the key for the fixDash style.  Use 0 (default) for dash patterns that depend on the linewidth and 1 for dash patterns that ignore the line width.  Value is “fixDash”.

STYLE_ROUNDED

Defines the key for the rounded style.  The type of this value is Boolean.  For edges this determines whether or not joins between edges segments are smoothed to a rounded finish.  For vertices that have the rectangle shape, this determines whether or not the rectangle is rounded.  Use 0 (default) for non-rounded or 1 for rounded.  Value is “rounded”.

STYLE_CURVED

Defines the key for the curved style.  The type of this value is Boolean.  It is only applicable for connector shapes.  Use 0 (default) for non-curved or 1 for curved.  Value is “curved”.

STYLE_ARCSIZE

Defines the rounding factor for a rounded rectangle in percent (without the percent sign).  Possible values are between 0 and 100.  If this value is not specified then RECTANGLE_ROUNDING_FACTOR * 100 is used.  For edges, this defines the absolute size of rounded corners in pixels.  If this values is not specified then LINE_ARCSIZE is used.  (This style is only exported via mxImageExport.)  Value is “arcSize”.

STYLE_ABSOLUTE_ARCSIZE

Defines the key for the absolute arc size style.  This specifies if arcSize for rectangles is abolute or relative.  Possible values are 1 and 0 (default).  Value is “absoluteArcSize”.

STYLE_SOURCE_PERIMETER_SPACING

Defines the key for the source perimeter spacing.  The type of this value is numeric.  This is the distance between the source connection point of an edge and the perimeter of the source vertex in pixels.  This style only applies to edges.  Value is “sourcePerimeterSpacing”.

STYLE_TARGET_PERIMETER_SPACING

Defines the key for the target perimeter spacing.  The type of this value is numeric.  This is the distance between the target connection point of an edge and the perimeter of the target vertex in pixels.  This style only applies to edges.  Value is “targetPerimeterSpacing”.

STYLE_PERIMETER_SPACING

Defines the key for the perimeter spacing.  This is the distance between the connection point and the perimeter in pixels.  When used in a vertex style, this applies to all incoming edges to floating ports (edges that terminate on the perimeter of the vertex).  When used in an edge style, this spacing applies to the source and target separately, if they terminate in floating ports (on the perimeter of the vertex).  Value is “perimeterSpacing”.

STYLE_SPACING

Defines the key for the spacing.  The value represents the spacing, in pixels, added to each side of a label in a vertex (style applies to vertices only).  Value is “spacing”.

STYLE_SPACING_TOP

Defines the key for the spacingTop style.  The value represents the spacing, in pixels, added to the top side of a label in a vertex (style applies to vertices only).  Value is “spacingTop”.

STYLE_SPACING_LEFT

Defines the key for the spacingLeft style.  The value represents the spacing, in pixels, added to the left side of a label in a vertex (style applies to vertices only).  Value is “spacingLeft”.

STYLE_SPACING_BOTTOM

Defines the key for the spacingBottom style The value represents the spacing, in pixels, added to the bottom side of a label in a vertex (style applies to vertices only).  Value is “spacingBottom”.

STYLE_SPACING_RIGHT

Defines the key for the spacingRight style The value represents the spacing, in pixels, added to the right side of a label in a vertex (style applies to vertices only).  Value is “spacingRight”.

STYLE_HORIZONTAL

Defines the key for the horizontal style.  Possible values are true or false.  This value only applies to vertices.  If the STYLE_SHAPE is “SHAPE_SWIMLANE” a value of false indicates that the swimlane should be drawn vertically, true indicates to draw it horizontally.  If the shape style does not indicate that this vertex is a swimlane, this value affects only whether the label is drawn horizontally or vertically.  Value is “horizontal”.

STYLE_DIRECTION

Defines the key for the direction style.  The direction style is used to specify the direction of certain shapes (eg.  mxTriangle).  Possible values are DIRECTION_EAST (default), DIRECTION_WEST, DIRECTION_NORTH and DIRECTION_SOUTH.  Value is “direction”.

STYLE_ANCHOR_POINT_DIRECTION

Defines the key for the anchorPointDirection style.  The defines if the direction style should be taken into account when computing the fixed point location for connected edges.  Default is 1 (yes).  Set this to 0 to ignore the direction style for fixed connection points.  Value is “anchorPointDirection”.

STYLE_ELBOW

Defines the key for the elbow style.  Possible values are ELBOW_HORIZONTAL and ELBOW_VERTICAL.  Default is ELBOW_HORIZONTAL.  This defines how the three segment orthogonal edge style leaves its terminal vertices.  The vertical style leaves the terminal vertices at the top and bottom sides.  Value is “elbow”.

STYLE_FONTCOLOR

Defines the key for the fontColor style.  Possible values are all HTML color names or HEX codes.  Value is “fontColor”.

STYLE_FONTFAMILY

Defines the key for the fontFamily style.  Possible values are names such as Arial; Dialog; Verdana; Times New Roman.  The value is of type String.  Value is fontFamily.

STYLE_FONTSIZE

Defines the key for the fontSize style (in px).  The type of the value is int.  Value is “fontSize”.

STYLE_FONTSTYLE

Defines the key for the fontStyle style.  Values may be any logical AND (sum) of FONT_BOLD, FONT_ITALIC and FONT_UNDERLINE.  The type of the value is int.  Value is “fontStyle”.

STYLE_ASPECT

Defines the key for the aspect style.  Possible values are empty or fixed.  If fixed is used then the aspect ratio of the cell will be maintained when resizing.  Default is empty.  Value is “aspect”.

STYLE_AUTOSIZE

Defines the key for the autosize style.  This specifies if a cell should be resized automatically if the value has changed.  Possible values are 0 or 1.  Default is 0.  See mxGraph.isAutoSizeCell.  This is normally combined with STYLE_RESIZABLE to disable manual sizing.  Value is “autosize”.

STYLE_FOLDABLE

Defines the key for the foldable style.  This specifies if a cell is foldable using a folding icon.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellFoldable.  Value is “foldable”.

STYLE_EDITABLE

Defines the key for the editable style.  This specifies if the value of a cell can be edited using the in-place editor.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellEditable.  Value is “editable”.

STYLE_BACKGROUND_OUTLINE

Defines the key for the backgroundOutline style.  This specifies if a only the background of a cell should be painted when it is highlighted.  Possible values are 0 or 1.  Default is 0.  Value is “backgroundOutline”.

STYLE_BENDABLE

Defines the key for the bendable style.  This specifies if the control points of an edge can be moved.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellBendable.  Value is “bendable”.

STYLE_MOVABLE

Defines the key for the movable style.  This specifies if a cell can be moved.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellMovable.  Value is “movable”.

STYLE_RESIZABLE

Defines the key for the resizable style.  This specifies if a cell can be resized.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellResizable.  Value is “resizable”.

STYLE_RESIZE_WIDTH

Defines the key for the resizeWidth style.  This specifies if a cell’s width is resized if the parent is resized.  If this is 1 then the width will be resized even if the cell’s geometry is relative.  If this is 0 then the cell’s width will not be resized.  Default is not defined.  Value is “resizeWidth”.

STYLE_RESIZE_WIDTH

Defines the key for the resizeHeight style.  This specifies if a cell’s height if resize if the parent is resized.  If this is 1 then the height will be resized even if the cell’s geometry is relative.  If this is 0 then the cell’s height will not be resized.  Default is not defined.  Value is “resizeHeight”.

STYLE_ROTATABLE

Defines the key for the rotatable style.  This specifies if a cell can be rotated.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellRotatable.  Value is “rotatable”.

STYLE_CLONEABLE

Defines the key for the cloneable style.  This specifies if a cell can be cloned.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellCloneable.  Value is “cloneable”.

STYLE_DELETABLE

Defines the key for the deletable style.  This specifies if a cell can be deleted.  Possible values are 0 or 1.  Default is 1.  See mxGraph.isCellDeletable.  Value is “deletable”.

STYLE_SHAPE

Defines the key for the shape.  Possible values are all constants with a SHAPE-prefix or any newly defined shape names.  Value is “shape”.

STYLE_EDGE

Defines the key for the edge style.  Possible values are the functions defined in mxEdgeStyle.  Value is “edgeStyle”.

STYLE_JETTY_SIZE

Defines the key for the jetty size in mxEdgeStyle.OrthConnector.  Default is 10.  Possible values are all numeric values or “auto”.  Jetty size is the minimum length of the orthogonal segment before it attaches to a shape.  Value is “jettySize”.

STYLE_SOURCE_JETTY_SIZE

Defines the key for the jetty size in mxEdgeStyle.OrthConnector.  Default is 10.  Possible values are numeric values or “auto”.  This has precedence over STYLE_JETTY_SIZE.  Value is “sourceJettySize”.

targetJettySize

Defines the key for the jetty size in mxEdgeStyle.OrthConnector.  Default is 10.  Possible values are numeric values or “auto”.  This has precedence over STYLE_JETTY_SIZE.  Value is “targetJettySize”.

STYLE_LOOP

Defines the key for the loop style.  Possible values are the functions defined in mxEdgeStyle.  Value is “loopStyle”.  Default is <mxGraph.defaultLoopStylean>.

STYLE_ORTHOGONAL_LOOP

Defines the key for the orthogonal loop style.  Possible values are 0 and 1.  Default is 0.  Value is “orthogonalLoop”.  Use this style to specify if loops with no waypoints and defined anchor points should be routed using STYLE_LOOP or not routed.

STYLE_ROUTING_CENTER_X

Defines the key for the horizontal routing center.  Possible values are between -0.5 and 0.5.  This is the relative offset from the center used for connecting edges.  The type of this value is numeric.  Value is “routingCenterX”.

STYLE_ROUTING_CENTER_Y

Defines the key for the vertical routing center.  Possible values are between -0.5 and 0.5.  This is the relative offset from the center used for connecting edges.  The type of this value is numeric.  Value is “routingCenterY”.

FONT_BOLD

Constant for bold fonts.  Default is 1.

FONT_ITALIC

Constant for italic fonts.  Default is 2.

FONT_UNDERLINE

Constant for underlined fonts.  Default is 4.

SHAPE_RECTANGLE

Name under which mxRectangleShape is registered in mxCellRenderer.  Default is rectangle.

SHAPE_ELLIPSE

Name under which mxEllipse is registered in mxCellRenderer.  Default is ellipse.

SHAPE_DOUBLE_ELLIPSE

Name under which mxDoubleEllipse is registered in mxCellRenderer.  Default is doubleEllipse.

SHAPE_RHOMBUS

Name under which mxRhombus is registered in mxCellRenderer.  Default is rhombus.

SHAPE_LINE

Name under which mxLine is registered in mxCellRenderer.  Default is line.

SHAPE_IMAGE

Name under which mxImageShape is registered in mxCellRenderer.  Default is image.

SHAPE_ARROW

Name under which mxArrow is registered in mxCellRenderer.  Default is arrow.

SHAPE_ARROW_CONNECTOR

Name under which mxArrowConnector is registered in mxCellRenderer.  Default is arrowConnector.

SHAPE_LABEL

Name under which mxLabel is registered in mxCellRenderer.  Default is label.

SHAPE_CYLINDER

Name under which mxCylinder is registered in mxCellRenderer.  Default is cylinder.

SHAPE_SWIMLANE

Name under which mxSwimlane is registered in mxCellRenderer.  Default is swimlane.

SHAPE_CONNECTOR

Name under which mxConnector is registered in mxCellRenderer.  Default is connector.

SHAPE_ACTOR

Name under which mxActor is registered in mxCellRenderer.  Default is actor.

SHAPE_CLOUD

Name under which mxCloud is registered in mxCellRenderer.  Default is cloud.

SHAPE_TRIANGLE

Name under which mxTriangle is registered in mxCellRenderer.  Default is triangle.

SHAPE_HEXAGON

Name under which mxHexagon is registered in mxCellRenderer.  Default is hexagon.

ARROW_CLASSIC

Constant for classic arrow markers.

ARROW_CLASSIC_THIN

Constant for thin classic arrow markers.

ARROW_BLOCK

Constant for block arrow markers.

ARROW_BLOCK_THIN

Constant for thin block arrow markers.

ARROW_OPEN

Constant for open arrow markers.

ARROW_OPEN_THIN

Constant for thin open arrow markers.

ARROW_OVAL

Constant for oval arrow markers.

ARROW_DIAMOND

Constant for diamond arrow markers.

ARROW_DIAMOND_THIN

Constant for thin diamond arrow markers.

ALIGN_LEFT

Constant for left horizontal alignment.  Default is left.

ALIGN_CENTER

Constant for center horizontal alignment.  Default is center.

ALIGN_RIGHT

Constant for right horizontal alignment.  Default is right.

ALIGN_TOP

Constant for top vertical alignment.  Default is top.

ALIGN_MIDDLE

Constant for middle vertical alignment.  Default is middle.

ALIGN_BOTTOM

Constant for bottom vertical alignment.  Default is bottom.

DIRECTION_NORTH

Constant for direction north.  Default is north.

DIRECTION_SOUTH

Constant for direction south.  Default is south.

DIRECTION_EAST

Constant for direction east.  Default is east.

DIRECTION_WEST

Constant for direction west.  Default is west.

TEXT_DIRECTION_DEFAULT

Constant for text direction default.  Default is an empty string.  Use this value to use the default text direction of the operating system.

TEXT_DIRECTION_AUTO

Constant for text direction automatic.  Default is auto.  Use this value to find the direction for a given text with mxText.getAutoDirection.

TEXT_DIRECTION_LTR

Constant for text direction left to right.  Default is ltr.  Use this value for left to right text direction.

TEXT_DIRECTION_RTL

Constant for text direction right to left.  Default is rtl.  Use this value for right to left text direction.

DIRECTION_MASK_NONE

Constant for no direction.

DIRECTION_MASK_WEST

Bitwise mask for west direction.

DIRECTION_MASK_NORTH

Bitwise mask for north direction.

DIRECTION_MASK_SOUTH

Bitwise mask for south direction.

DIRECTION_MASK_EAST

Bitwise mask for east direction.

DIRECTION_MASK_ALL

Bitwise mask for all directions.

ELBOW_VERTICAL

Constant for elbow vertical.  Default is horizontal.

ELBOW_HORIZONTAL

Constant for elbow horizontal.  Default is horizontal.

EDGESTYLE_ELBOW

Name of the elbow edge style.  Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_ENTITY_RELATION

Name of the entity relation edge style.  Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_LOOP

Name of the loop edge style.  Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_SIDETOSIDE

Name of the side to side edge style.  Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_TOPTOBOTTOM

Name of the top to bottom edge style.  Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_ORTHOGONAL

Name of the generic orthogonal edge style.  Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_SEGMENT

Name of the generic segment edge style.  Can be used as a string value for the STYLE_EDGE style.

PERIMETER_ELLIPSE

Name of the ellipse perimeter.  Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_RECTANGLE

Name of the rectangle perimeter.  Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_RHOMBUS

Name of the rhombus perimeter.  Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_HEXAGON

Name of the hexagon perimeter.  Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_TRIANGLE

PERIMETER_TRIANGLE: 'trianglePerimeter' }

Name of the triangle perimeter.  Can be used as a string value for the STYLE_PERIMETER style.

mxEventObject

The mxEventObject is a wrapper for all properties of a single event.  Additionally, it also offers functions to consume the event and check if it was consumed as follows:

evt.consume();
INV: evt.isConsumed() == true
Summary
Functions
mxEventObjectConstructs a new event object with the specified name.
Variables
nameHolds the name.
propertiesHolds the properties as an associative array.
consumedHolds the consumed state.
Functions
getNameReturns name.
getPropertiesReturns properties.
getPropertyReturns the property for the given key.
isConsumedReturns true if the event has been consumed.
consumeConsumes the event.

Functions

mxEventObject

function mxEventObject(name)

Constructs a new event object with the specified name.  An optional sequence of key, value pairs can be appended to define properties.

Example

new mxEventObject("eventName", key1, val1, .., keyN, valN)

Variables

name

mxEventObject.prototype.name

Holds the name.

properties

mxEventObject.prototype.properties

Holds the properties as an associative array.

consumed

mxEventObject.prototype.consumed

Holds the consumed state.  Default is false.

Functions

getName

mxEventObject.prototype.getName = function()

Returns name.

getProperties

mxEventObject.prototype.getProperties = function()

Returns properties.

getProperty

mxEventObject.prototype.getProperty = function(key)

Returns the property for the given key.

isConsumed

mxEventObject.prototype.isConsumed = function()

Returns true if the event has been consumed.

consume

mxEventObject.prototype.consume = function()

Consumes the event.

mxMouseEvent

Base class for all mouse events in mxGraph.  A listener for this event should implement the following methods:

graph.addMouseListener(
{
  mouseDown: function(sender, evt)
  {
    mxLog.debug('mouseDown');
  },
  mouseMove: function(sender, evt)
  {
    mxLog.debug('mouseMove');
  },
  mouseUp: function(sender, evt)
  {
    mxLog.debug('mouseUp');
  }
});
Summary
Functions
mxMouseEventConstructs a new event object for the given arguments.
Variables
consumedHolds the consumed state of this event.
evtHolds the inner event object.
graphXHolds the x-coordinate of the event in the graph.
graphYHolds the y-coordinate of the event in the graph.
stateHolds the optional mxCellState associated with this event.
sourceStateHolds the mxCellState that was passed to the constructor.
Functions
getEventReturns evt.
getSourceReturns the target DOM element using mxEvent.getSource for evt.
isSourceReturns true if the given mxShape is the source of evt.
getXReturns <evt.clientX>.
getYReturns <evt.clientY>.
getGraphXReturns graphX.
getGraphYReturns graphY.
getStateReturns state.
getCellReturns the mxCell in state is not null.
isPopupTriggerReturns true if the event is a popup trigger.
isConsumedReturns consumed.
consumeSets consumed to true and invokes preventDefault on the native event if such a method is defined.

Functions

mxMouseEvent

function mxMouseEvent(evt,
state)

Constructs a new event object for the given arguments.

Parameters

evtNative mouse event.
stateOptional mxCellState under the mouse.

Variables

consumed

mxMouseEvent.prototype.consumed

Holds the consumed state of this event.

evt

mxMouseEvent.prototype.evt

Holds the inner event object.

graphX

mxMouseEvent.prototype.graphX

Holds the x-coordinate of the event in the graph.  This value is set in mxGraph.fireMouseEvent.

graphY

mxMouseEvent.prototype.graphY

Holds the y-coordinate of the event in the graph.  This value is set in mxGraph.fireMouseEvent.

state

mxMouseEvent.prototype.state

Holds the optional mxCellState associated with this event.

sourceState

mxMouseEvent.prototype.sourceState

Holds the mxCellState that was passed to the constructor.  This can be different from state depending on the result of mxGraph.getEventState.

Functions

getEvent

mxMouseEvent.prototype.getEvent = function()

Returns evt.

getSource

mxMouseEvent.prototype.getSource = function()

Returns the target DOM element using mxEvent.getSource for evt.

isSource

mxMouseEvent.prototype.isSource = function(shape)

Returns true if the given mxShape is the source of evt.

getX

mxMouseEvent.prototype.getX = function()

Returns <evt.clientX>.

getY

mxMouseEvent.prototype.getY = function()

Returns <evt.clientY>.

getGraphX

mxMouseEvent.prototype.getGraphX = function()

Returns graphX.

getGraphY

mxMouseEvent.prototype.getGraphY = function()

Returns graphY.

getState

mxMouseEvent.prototype.getState = function()

Returns state.

getCell

mxMouseEvent.prototype.getCell = function()

Returns the mxCell in state is not null.

isPopupTrigger

mxMouseEvent.prototype.isPopupTrigger = function()

Returns true if the event is a popup trigger.

isConsumed

mxMouseEvent.prototype.isConsumed = function()

Returns consumed.

consume

mxMouseEvent.prototype.consume = function(preventDefault)

Sets consumed to true and invokes preventDefault on the native event if such a method is defined.  This is used mainly to avoid the cursor from being changed to a text cursor in Webkit.  You can use the preventDefault flag to disable this functionality.

Parameters

preventDefaultSpecifies if the native event should be canceled.  Default is true.

mxEventSource

Base class for objects that dispatch named events.  To create a subclass that inherits from mxEventSource, the following code is used.

function MyClass() { };

MyClass.prototype = new mxEventSource();
MyClass.prototype.constructor = MyClass;

Known Subclasses

mxGraphModel, mxGraph, mxGraphView, mxEditor, mxCellOverlay, mxToolbar, mxWindow

Summary
Functions
mxEventSourceConstructs a new event source.
Variables
eventListenersHolds the event names and associated listeners in an array.
eventsEnabledSpecifies if events can be fired.
eventSourceOptional source for events.
Functions
isEventsEnabledReturns eventsEnabled.
setEventsEnabledSets eventsEnabled.
getEventSourceReturns eventSource.
setEventSourceSets eventSource.
addListenerBinds the specified function to the given event name.
removeListenerRemoves all occurrences of the given listener from eventListeners.
fireEventDispatches the given event to the listeners which are registered for the event.

Functions

mxEventSource

function mxEventSource(eventSource)

Constructs a new event source.

Variables

eventListeners

mxEventSource.prototype.eventListeners

Holds the event names and associated listeners in an array.  The array contains the event name followed by the respective listener for each registered listener.

eventsEnabled

mxEventSource.prototype.eventsEnabled

Specifies if events can be fired.  Default is true.

eventSource

mxEventSource.prototype.eventSource

Optional source for events.  Default is null.

Functions

isEventsEnabled

mxEventSource.prototype.isEventsEnabled = function()

Returns eventsEnabled.

setEventsEnabled

mxEventSource.prototype.setEventsEnabled = function(value)

Sets eventsEnabled.

getEventSource

mxEventSource.prototype.getEventSource = function()

Returns eventSource.

setEventSource

mxEventSource.prototype.setEventSource = function(value)

Sets eventSource.

addListener

mxEventSource.prototype.addListener = function(name,
funct)

Binds the specified function to the given event name.  If no event name is given, then the listener is registered for all events.

The parameters of the listener are the sender and an mxEventObject.

removeListener

mxEventSource.prototype.removeListener = function(funct)

Removes all occurrences of the given listener from eventListeners.

fireEvent

mxEventSource.prototype.fireEvent = function(evt,
sender)

Dispatches the given event to the listeners which are registered for the event.  The sender argument is optional.  The current execution scope (“this”) is used for the listener invocation (see mxUtils.bind).

Example

fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN))

Parameters

evtmxEventObject that represents the event.
senderOptional sender to be passed to the listener.  Default value is the return value of getEventSource.

mxEvent

Cross-browser DOM event support.  For internal event handling, mxEventSource and the graph event dispatch loop in mxGraph are used.

Memory Leaks

Use this class for adding and removing listeners to/from DOM nodes.  The removeAllListeners function is provided to remove all listeners that have been added using addListener.  The function should be invoked when the last reference is removed in the JavaScript code, typically when the referenced DOM node is removed from the DOM.

Summary
Functions
addListenerBinds the function to the specified event on the given element.
removeListenerRemoves the specified listener from the given element.
removeAllListenersRemoves all listeners from the given element.
addGestureListenersAdds the given listeners for touch, mouse and/or pointer events.
removeGestureListenersRemoves the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.
redirectMouseEventsRedirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments.
releaseRemoves the known listeners from the given DOM node and its descendants.
disableContextMenuDisables the context menu for the given element.
getSourceReturns the event’s target or srcElement depending on the browser.
isConsumedReturns true if the event has been consumed using consume.
isTouchEventReturns true if the event was generated using a touch device (not a pen or mouse).
isPenEventReturns true if the event was generated using a pen (not a touch device or mouse).
isMultiTouchEventReturns true if the event was generated using a touch device (not a pen or mouse).
isMouseEventReturns true if the event was generated using a mouse (not a pen or touch device).
isLeftMouseButtonReturns true if the left mouse button is pressed for the given event.
isMiddleMouseButtonReturns true if the middle mouse button is pressed for the given event.
isRightMouseButtonReturns true if the right mouse button was pressed.
isPopupTriggerReturns true if the event is a popup trigger.
isShiftDownReturns true if the shift key is pressed for the given event.
isAltDownReturns true if the alt key is pressed for the given event.
isControlDownReturns true if the control key is pressed for the given event.
isMetaDownReturns true if the meta key is pressed for the given event.
getMainEventReturns the touch or mouse event that contains the mouse coordinates.
getClientXReturns true if the meta key is pressed for the given event.
getClientYReturns true if the meta key is pressed for the given event.
consumeConsumes the given event.
Variables
LABEL_HANDLEIndex for the label handle in an mxMouseEvent.
ROTATION_HANDLEIndex for the rotation handle in an mxMouseEvent.
CUSTOM_HANDLEStart index for the custom handles in an mxMouseEvent.
VIRTUAL_HANDLEStart index for the virtual handles in an mxMouseEvent.
MOUSE_DOWNSpecifies the event name for mouseDown.
MOUSE_MOVESpecifies the event name for mouseMove.
MOUSE_UPSpecifies the event name for mouseUp.
ACTIVATESpecifies the event name for activate.
RESIZE_STARTSpecifies the event name for resizeStart.
RESIZESpecifies the event name for resize.
RESIZE_ENDSpecifies the event name for resizeEnd.
MOVE_STARTSpecifies the event name for moveStart.
MOVESpecifies the event name for move.
MOVE_ENDSpecifies the event name for moveEnd.
PAN_STARTSpecifies the event name for panStart.
PANSpecifies the event name for pan.
PAN_ENDSpecifies the event name for panEnd.
MINIMIZESpecifies the event name for minimize.
NORMALIZESpecifies the event name for normalize.
MAXIMIZESpecifies the event name for maximize.
HIDESpecifies the event name for hide.
SHOWSpecifies the event name for show.
CLOSESpecifies the event name for close.
DESTROYSpecifies the event name for destroy.
REFRESHSpecifies the event name for refresh.
SIZESpecifies the event name for size.
SELECTSpecifies the event name for select.
FIREDSpecifies the event name for fired.
FIRE_MOUSE_EVENTSpecifies the event name for fireMouseEvent.
GESTURESpecifies the event name for gesture.
TAP_AND_HOLDSpecifies the event name for tapAndHold.
GETSpecifies the event name for get.
RECEIVESpecifies the event name for receive.
CONNECTSpecifies the event name for connect.
DISCONNECTSpecifies the event name for disconnect.
SUSPENDSpecifies the event name for suspend.
RESUMESpecifies the event name for suspend.
MARKSpecifies the event name for mark.
ROOTSpecifies the event name for root.
POSTSpecifies the event name for post.
OPENSpecifies the event name for open.
SAVESpecifies the event name for open.
BEFORE_ADD_VERTEXSpecifies the event name for beforeAddVertex.
ADD_VERTEXSpecifies the event name for addVertex.
AFTER_ADD_VERTEXSpecifies the event name for afterAddVertex.
DONESpecifies the event name for done.
EXECUTESpecifies the event name for execute.
EXECUTEDSpecifies the event name for executed.
BEGIN_UPDATESpecifies the event name for beginUpdate.
START_EDITSpecifies the event name for startEdit.
END_UPDATESpecifies the event name for endUpdate.
END_EDITSpecifies the event name for endEdit.
BEFORE_UNDOSpecifies the event name for beforeUndo.
UNDOSpecifies the event name for undo.
REDOSpecifies the event name for redo.
CHANGESpecifies the event name for change.
NOTIFYSpecifies the event name for notify.
LAYOUT_CELLSSpecifies the event name for layoutCells.
CLICKSpecifies the event name for click.
SCALESpecifies the event name for scale.
TRANSLATESpecifies the event name for translate.
SCALE_AND_TRANSLATESpecifies the event name for scaleAndTranslate.
UPSpecifies the event name for up.
DOWNSpecifies the event name for down.
ADDSpecifies the event name for add.
REMOVESpecifies the event name for remove.
CLEARSpecifies the event name for clear.
ADD_CELLSSpecifies the event name for addCells.
CELLS_ADDEDSpecifies the event name for cellsAdded.
MOVE_CELLSSpecifies the event name for moveCells.
CELLS_MOVEDSpecifies the event name for cellsMoved.
RESIZE_CELLSSpecifies the event name for resizeCells.
CELLS_RESIZEDSpecifies the event name for cellsResized.
TOGGLE_CELLSSpecifies the event name for toggleCells.
CELLS_TOGGLEDSpecifies the event name for cellsToggled.
ORDER_CELLSSpecifies the event name for orderCells.
CELLS_ORDEREDSpecifies the event name for cellsOrdered.
REMOVE_CELLSSpecifies the event name for removeCells.
CELLS_REMOVEDSpecifies the event name for cellsRemoved.
GROUP_CELLSSpecifies the event name for groupCells.
UNGROUP_CELLSSpecifies the event name for ungroupCells.
REMOVE_CELLS_FROM_PARENTSpecifies the event name for removeCellsFromParent.
FOLD_CELLSSpecifies the event name for foldCells.
CELLS_FOLDEDSpecifies the event name for cellsFolded.
ALIGN_CELLSSpecifies the event name for alignCells.
LABEL_CHANGEDSpecifies the event name for labelChanged.
CONNECT_CELLSpecifies the event name for connectCell.
CELL_CONNECTEDSpecifies the event name for cellConnected.
SPLIT_EDGESpecifies the event name for splitEdge.
FLIP_EDGESpecifies the event name for flipEdge.
START_EDITINGSpecifies the event name for startEditing.
EDITING_STARTEDSpecifies the event name for editingStarted.
EDITING_STOPPEDSpecifies the event name for editingStopped.
ADD_OVERLAYSpecifies the event name for addOverlay.
REMOVE_OVERLAYSpecifies the event name for removeOverlay.
UPDATE_CELL_SIZESpecifies the event name for updateCellSize.
ESCAPESpecifies the event name for escape.
DOUBLE_CLICKSpecifies the event name for doubleClick.
STARTSpecifies the event name for start.
RESETSpecifies the event name for reset.

Functions

addListener

addListener: function()

Binds the function to the specified event on the given element.  Use mxUtils.bind in order to bind the “this” keyword inside the function to a given execution scope.

removeListener

removeListener: function()

Removes the specified listener from the given element.

removeAllListeners

removeAllListeners: function(element)

Removes all listeners from the given element.

addGestureListeners

addGestureListeners: function(node,
startListener,
moveListener,
endListener)

Adds the given listeners for touch, mouse and/or pointer events.  If mxClient.IS_POINTER is true then pointer events will be registered, else the respective mouse events will be registered.  If mxClient.IS_POINTER is false and mxClient.IS_TOUCH is true then the respective touch events will be registered as well as the mouse events.

removeGestureListeners

removeGestureListeners: function(node,
startListener,
moveListener,
endListener)

Removes the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.

redirectMouseEvents

redirectMouseEvents: function(node,
graph,
state,
down,
move,
up,
dblClick)

Redirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments.  State can either be an instance of mxCellState or a function that returns an mxCellState.  The down, move, up and dblClick arguments are optional functions that take the trigger event as arguments and replace the default behaviour.

release

release: function(element)

Removes the known listeners from the given DOM node and its descendants.

Parameters

elementDOM node to remove the listeners from.

disableContextMenu

disableContextMenu: function(element)

Disables the context menu for the given element.

getSource

getSource: function(evt)

Returns the event’s target or srcElement depending on the browser.

isConsumed

isConsumed: function(evt)

Returns true if the event has been consumed using consume.

isTouchEvent

isTouchEvent: function(evt)

Returns true if the event was generated using a touch device (not a pen or mouse).

isPenEvent

isPenEvent: function(evt)

Returns true if the event was generated using a pen (not a touch device or mouse).

isMultiTouchEvent

isMultiTouchEvent: function(evt)

Returns true if the event was generated using a touch device (not a pen or mouse).

isMouseEvent

isMouseEvent: function(evt)

Returns true if the event was generated using a mouse (not a pen or touch device).

isLeftMouseButton

isLeftMouseButton: function(evt)

Returns true if the left mouse button is pressed for the given event.  To check if a button is pressed during a mouseMove you should use the mxGraph.isMouseDown property.  Note that this returns true in Firefox for control+left-click on the Mac.

isMiddleMouseButton

isMiddleMouseButton: function(evt)

Returns true if the middle mouse button is pressed for the given event.  To check if a button is pressed during a mouseMove you should use the mxGraph.isMouseDown property.

isRightMouseButton

isRightMouseButton: function(evt)

Returns true if the right mouse button was pressed.  Note that this button might not be available on some systems.  For handling a popup trigger isPopupTrigger should be used.

isPopupTrigger

isPopupTrigger: function(evt)

Returns true if the event is a popup trigger.  This implementation returns true if the right button or the left button and control was pressed on a Mac.

isShiftDown

isShiftDown: function(evt)

Returns true if the shift key is pressed for the given event.

isAltDown

isAltDown: function(evt)

Returns true if the alt key is pressed for the given event.

isControlDown

isControlDown: function(evt)

Returns true if the control key is pressed for the given event.

isMetaDown

isMetaDown: function(evt)

Returns true if the meta key is pressed for the given event.

getMainEvent

getMainEvent: function(e)

Returns the touch or mouse event that contains the mouse coordinates.

getClientX

getClientX: function(e)

Returns true if the meta key is pressed for the given event.

getClientY

getClientY: function(e)

Returns true if the meta key is pressed for the given event.

consume

consume: function(evt,
preventDefault,
stopPropagation)

Consumes the given event.

Parameters

evtNative event to be consumed.
preventDefaultOptional boolean to prevent the default for the event.  Default is true.
stopPropagationOption boolean to stop event propagation.  Default is true.

Variables

LABEL_HANDLE

Index for the label handle in an mxMouseEvent.  This should be a negative value that does not interfere with any possible handle indices.  Default is -1.

ROTATION_HANDLE

Index for the rotation handle in an mxMouseEvent.  This should be a negative value that does not interfere with any possible handle indices.  Default is -2.

CUSTOM_HANDLE

Start index for the custom handles in an mxMouseEvent.  This should be a negative value and is the start index which is decremented for each custom handle.  Default is -100.

VIRTUAL_HANDLE

Start index for the virtual handles in an mxMouseEvent.  This should be a negative value and is the start index which is decremented for each virtual handle.  Default is -100000.  This assumes that there are no more than VIRTUAL_HANDLE - CUSTOM_HANDLE custom handles.

MOUSE_DOWN

Specifies the event name for mouseDown.

MOUSE_MOVE

Specifies the event name for mouseMove.

MOUSE_UP

Specifies the event name for mouseUp.

ACTIVATE

Specifies the event name for activate.

RESIZE_START

Specifies the event name for resizeStart.

RESIZE

Specifies the event name for resize.

RESIZE_END

Specifies the event name for resizeEnd.

MOVE_START

Specifies the event name for moveStart.

MOVE

Specifies the event name for move.

MOVE_END

Specifies the event name for moveEnd.

PAN_START

Specifies the event name for panStart.

PAN

Specifies the event name for pan.

PAN_END

Specifies the event name for panEnd.

MINIMIZE

Specifies the event name for minimize.

NORMALIZE

Specifies the event name for normalize.

MAXIMIZE

Specifies the event name for maximize.

HIDE

Specifies the event name for hide.

SHOW

Specifies the event name for show.

CLOSE

Specifies the event name for close.

DESTROY

Specifies the event name for destroy.

REFRESH

Specifies the event name for refresh.

SIZE

Specifies the event name for size.

SELECT

Specifies the event name for select.

FIRED

Specifies the event name for fired.

FIRE_MOUSE_EVENT

Specifies the event name for fireMouseEvent.

GESTURE

Specifies the event name for gesture.

TAP_AND_HOLD

Specifies the event name for tapAndHold.

GET

Specifies the event name for get.

RECEIVE

Specifies the event name for receive.

CONNECT

Specifies the event name for connect.

DISCONNECT

Specifies the event name for disconnect.

SUSPEND

Specifies the event name for suspend.

RESUME

Specifies the event name for suspend.

MARK

Specifies the event name for mark.

ROOT

Specifies the event name for root.

POST

Specifies the event name for post.

OPEN

Specifies the event name for open.

SAVE

Specifies the event name for open.

BEFORE_ADD_VERTEX

Specifies the event name for beforeAddVertex.

ADD_VERTEX

Specifies the event name for addVertex.

AFTER_ADD_VERTEX

Specifies the event name for afterAddVertex.

DONE

Specifies the event name for done.

EXECUTE

Specifies the event name for execute.

EXECUTED

Specifies the event name for executed.

BEGIN_UPDATE

Specifies the event name for beginUpdate.

START_EDIT

Specifies the event name for startEdit.

END_UPDATE

Specifies the event name for endUpdate.

END_EDIT

Specifies the event name for endEdit.

BEFORE_UNDO

Specifies the event name for beforeUndo.

UNDO

Specifies the event name for undo.

REDO

Specifies the event name for redo.

CHANGE

Specifies the event name for change.

NOTIFY

Specifies the event name for notify.

LAYOUT_CELLS

Specifies the event name for layoutCells.

CLICK

Specifies the event name for click.

SCALE

Specifies the event name for scale.

TRANSLATE

Specifies the event name for translate.

SCALE_AND_TRANSLATE

Specifies the event name for scaleAndTranslate.

UP

Specifies the event name for up.

DOWN

Specifies the event name for down.

ADD

Specifies the event name for add.

REMOVE

Specifies the event name for remove.

CLEAR

Specifies the event name for clear.

ADD_CELLS

Specifies the event name for addCells.

CELLS_ADDED

Specifies the event name for cellsAdded.

MOVE_CELLS

Specifies the event name for moveCells.

CELLS_MOVED

Specifies the event name for cellsMoved.

RESIZE_CELLS

Specifies the event name for resizeCells.

CELLS_RESIZED

Specifies the event name for cellsResized.

TOGGLE_CELLS

Specifies the event name for toggleCells.

CELLS_TOGGLED

Specifies the event name for cellsToggled.

ORDER_CELLS

Specifies the event name for orderCells.

CELLS_ORDERED

Specifies the event name for cellsOrdered.

REMOVE_CELLS

Specifies the event name for removeCells.

CELLS_REMOVED

Specifies the event name for cellsRemoved.

GROUP_CELLS

Specifies the event name for groupCells.

UNGROUP_CELLS

Specifies the event name for ungroupCells.

REMOVE_CELLS_FROM_PARENT

Specifies the event name for removeCellsFromParent.

FOLD_CELLS

Specifies the event name for foldCells.

CELLS_FOLDED

Specifies the event name for cellsFolded.

ALIGN_CELLS

Specifies the event name for alignCells.

LABEL_CHANGED

Specifies the event name for labelChanged.

CONNECT_CELL

Specifies the event name for connectCell.

CELL_CONNECTED

Specifies the event name for cellConnected.

SPLIT_EDGE

Specifies the event name for splitEdge.

FLIP_EDGE

Specifies the event name for flipEdge.

START_EDITING

Specifies the event name for startEditing.

EDITING_STARTED

Specifies the event name for editingStarted.

EDITING_STOPPED

Specifies the event name for editingStopped.

ADD_OVERLAY

Specifies the event name for addOverlay.

REMOVE_OVERLAY

Specifies the event name for removeOverlay.

UPDATE_CELL_SIZE

Specifies the event name for updateCellSize.

ESCAPE

Specifies the event name for escape.

DOUBLE_CLICK

Specifies the event name for doubleClick.

START

Specifies the event name for start.

RESET

RESET: 'reset' }

Specifies the event name for reset.

mxXmlRequest

XML HTTP request wrapper.  See also: mxUtils.get, mxUtils.post and mxUtils.load.  This class provides a cross-browser abstraction for Ajax requests.

Encoding

For encoding parameter values, the built-in encodeURIComponent JavaScript method must be used.  For automatic encoding of post data in mxEditor the mxEditor.escapePostData switch can be set to true (default).  The encoding will be carried out using the conte type of the page.  That is, the page containting the editor should contain a meta tag in the header, eg.  <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

Example

var onload = function(req)
{
  mxUtils.alert(req.getDocumentElement());
}

var onerror = function(req)
{
  mxUtils.alert('Error');
}
new mxXmlRequest(url, 'key=value').send(onload, onerror);

Sends an asynchronous POST request to the specified URL.

Example

var req = new mxXmlRequest(url, 'key=value', 'POST', false);
req.send();
mxUtils.alert(req.getDocumentElement());

Sends a synchronous POST request to the specified URL.

Example

var encoder = new mxCodec();
var result = encoder.encode(graph.getModel());
var xml = encodeURIComponent(mxUtils.getXml(result));
new mxXmlRequest(url, 'xml='+xml).send();

Sends an encoded graph model to the specified URL using xml as the parameter name.  The parameter can then be retrieved in C# as follows:

string xml = HttpUtility.UrlDecode(context.Request.Params["xml"]);

Or in Java as follows

String xml = URLDecoder.decode(request.getParameter("xml"), "UTF-8").replace("\n", "&#xa;");

Note that the linefeeds should only be replaced if the XML is processed in Java, for example when creating an image.

Summary
Functions
mxXmlRequestConstructs an XML HTTP request.
Variables
urlHolds the target URL of the request.
paramsHolds the form encoded data for the POST request.
methodSpecifies the request method.
asyncBoolean indicating if the request is asynchronous.
binaryBoolean indicating if the request is binary.
withCredentialsSpecifies if withCredentials should be used in HTML5-compliant browsers.
usernameSpecifies the username to be used for authentication.
passwordSpecifies the password to be used for authentication.
requestHolds the inner, browser-specific request object.
decodeSimulateValuesSpecifies if request values should be decoded as URIs before setting the textarea value in simulate.
Functions
isBinaryReturns binary.
setBinarySets binary.
getTextReturns the response as a string.
isReadyReturns true if the response is ready.
getDocumentElementReturns the document element of the response XML document.
getXmlReturns the response as an XML document.
getTextReturns the response as a string.
getStatusReturns the status as a number, eg.
createCreates and returns the inner request object.
sendSend the request to the target URL using the specified functions to process the response asychronously.
setRequestHeadersSets the headers for the given request and parameters.
simulateCreates and posts a request to the given target URL using a dynamically created form inside the given document.

Functions

mxXmlRequest

function mxXmlRequest(url,
params,
method,
async,
username,
password)

Constructs an XML HTTP request.

Parameters

urlTarget URL of the request.
paramsForm encoded parameters to send with a POST request.
methodString that specifies the request method.  Possible values are POST and GET.  Default is POST.
asyncBoolean specifying if an asynchronous request should be used.  Default is true.
usernameString specifying the username to be used for the request.
passwordString specifying the password to be used for the request.

Variables

url

mxXmlRequest.prototype.url

Holds the target URL of the request.

params

mxXmlRequest.prototype.params

Holds the form encoded data for the POST request.

method

mxXmlRequest.prototype.method

Specifies the request method.  Possible values are POST and GET.  Default is POST.

async

mxXmlRequest.prototype.async

Boolean indicating if the request is asynchronous.

binary

mxXmlRequest.prototype.binary

Boolean indicating if the request is binary.  This option is ignored in IE.  In all other browsers the requested mime type is set to text/plain; charset=x-user-defined.  Default is false.

withCredentials

mxXmlRequest.prototype.withCredentials

Specifies if withCredentials should be used in HTML5-compliant browsers.  Default is false.

username

mxXmlRequest.prototype.username

Specifies the username to be used for authentication.

password

mxXmlRequest.prototype.password

Specifies the password to be used for authentication.

request

mxXmlRequest.prototype.request

Holds the inner, browser-specific request object.

decodeSimulateValues

mxXmlRequest.prototype.decodeSimulateValues

Specifies if request values should be decoded as URIs before setting the textarea value in simulate.  Defaults to false for backwards compatibility, to avoid another decode on the server this should be set to true.

Functions

isBinary

mxXmlRequest.prototype.isBinary = function()

Returns binary.

setBinary

mxXmlRequest.prototype.setBinary = function(value)

Sets binary.

getText

mxXmlRequest.prototype.getText = function()

Returns the response as a string.

isReady

mxXmlRequest.prototype.isReady = function()

Returns true if the response is ready.

getDocumentElement

mxXmlRequest.prototype.getDocumentElement = function()

Returns the document element of the response XML document.

getXml

mxXmlRequest.prototype.getXml = function()

Returns the response as an XML document.  Use getDocumentElement to get the document element of the XML document.

getText

mxXmlRequest.prototype.getText = function()

Returns the response as a string.

getStatus

mxXmlRequest.prototype.getStatus = function()

Returns the status as a number, eg.  404 for “Not found” or 200 for “OK”.  Note: The NS_ERROR_NOT_AVAILABLE for invalid responses cannot be cought.

create

mxXmlRequest.prototype.create = function()

Creates and returns the inner request object.

send

mxXmlRequest.prototype.send = function(onload,
onerror,
timeout,
ontimeout)

Send the request to the target URL using the specified functions to process the response asychronously.

Note: Due to technical limitations, onerror is currently ignored.

Parameters

onloadFunction to be invoked if a successful response was received.
onerrorFunction to be called on any error.
timeoutOptional timeout in ms before calling ontimeout.
ontimeoutOptional function to execute on timeout.

setRequestHeaders

mxXmlRequest.prototype.setRequestHeaders = function(request,
params)

Sets the headers for the given request and parameters.  This sets the content-type to application/x-www-form-urlencoded if any params exist.

Example

request.setRequestHeaders = function(request, params)
{
  if (params != null)
  {
    request.setRequestHeader('Content-Type',
            'multipart/form-data');
    request.setRequestHeader('Content-Length',
            params.length);
  }
};

Use the code above before calling send if you require a multipart/form-data request.

simulate

mxXmlRequest.prototype.simulate = function(doc,
target)

Creates and posts a request to the given target URL using a dynamically created form inside the given document.

Parameters

docsDocument that contains the form element.
targetTarget to send the form result to.

mxClipboard

Singleton that implements a clipboard for graph cells.

Example

mxClipboard.copy(graph);
mxClipboard.paste(graph2);

This copies the selection cells from the graph to the clipboard and pastes them into graph2.

For fine-grained control of the clipboard data the mxGraph.canExportCell and mxGraph.canImportCell functions can be overridden.

To restore previous parents for pasted cells, the implementation for copy and paste can be changed as follows.

mxClipboard.copy = function(graph, cells)
{
  cells = cells || graph.getSelectionCells();
  var result = graph.getExportableCells(cells);

  mxClipboard.parents = new Object();

  for (var i = 0; i < result.length; i++)
  {
    mxClipboard.parents[i] = graph.model.getParent(cells[i]);
  }

  mxClipboard.insertCount = 1;
  mxClipboard.setCells(graph.cloneCells(result));

  return result;
};

mxClipboard.paste = function(graph)
{
  if (!mxClipboard.isEmpty())
  {
    var cells = graph.getImportableCells(mxClipboard.getCells());
    var delta = mxClipboard.insertCount * mxClipboard.STEPSIZE;
    var parent = graph.getDefaultParent();

    graph.model.beginUpdate();
    try
    {
      for (var i = 0; i < cells.length; i++)
      {
        var tmp = (mxClipboard.parents != null && graph.model.contains(mxClipboard.parents[i])) ?
             mxClipboard.parents[i] : parent;
        cells[i] = graph.importCells([cells[i]], delta, delta, tmp)[0];
      }
    }
    finally
    {
      graph.model.endUpdate();
    }

    // Increments the counter and selects the inserted cells
    mxClipboard.insertCount++;
    graph.setSelectionCells(cells);
  }
};
Summary
Variables
STEPSIZEDefines the step size to offset the cells after each paste operation.
insertCountCounts the number of times the clipboard data has been inserted.
cellsHolds the array of mxCells currently in the clipboard.
Functions
setCellsSets the cells in the clipboard.
getCellsReturns the cells in the clipboard.
isEmptyReturns true if the clipboard currently has not data stored.
cutCuts the given array of mxCells from the specified graph.
removeCellsHook to remove the given cells from the given graph after a cut operation.
copyCopies the given array of mxCells from the specified graph to cells.
pastePastes the cells into the specified graph restoring the relation to <parents>, if possible.

Variables

STEPSIZE

Defines the step size to offset the cells after each paste operation.  Default is 10.

insertCount

Counts the number of times the clipboard data has been inserted.

cells

Holds the array of mxCells currently in the clipboard.

Functions

setCells

setCells: function(cells)

Sets the cells in the clipboard.  Fires a mxEvent.CHANGE event.

getCells

getCells: function()

Returns the cells in the clipboard.

isEmpty

isEmpty: function()

Returns true if the clipboard currently has not data stored.

cut

cut: function(graph,
cells)

Cuts the given array of mxCells from the specified graph.  If cells is null then the selection cells of the graph will be used.  Returns the cells that have been cut from the graph.

Parameters

graphmxGraph that contains the cells to be cut.
cellsOptional array of mxCells to be cut.

removeCells

removeCells: function(graph,
cells)

Hook to remove the given cells from the given graph after a cut operation.

Parameters

graphmxGraph that contains the cells to be cut.
cellsArray of mxCells to be cut.

copy

copy: function(graph,
cells)

Copies the given array of mxCells from the specified graph to cells.  Returns the original array of cells that has been cloned.  Descendants of cells in the array are ignored.

Parameters

graphmxGraph that contains the cells to be copied.
cellsOptional array of mxCells to be copied.

paste

paste: function(graph)

Pastes the cells into the specified graph restoring the relation to <parents>, if possible.  If the parents are no longer in the graph or invisible then the cells are added to the graph’s default or into the swimlane under the cell’s new location if one exists.  The cells are added to the graph using mxGraph.importCells and returned.

Parameters

graphmxGraph to paste the cells into.

mxWindow

Basic window inside a document.

Examples

Creating a simple window.

var tb = document.createElement('div');
var wnd = new mxWindow('Title', tb, 100, 100, 200, 200, true, true);
wnd.setVisible(true);

Creating a window that contains an iframe.

var frame = document.createElement('iframe');
frame.setAttribute('width', '192px');
frame.setAttribute('height', '172px');
frame.setAttribute('src', 'http://www.example.com/');
frame.style.backgroundColor = 'white';

var w = document.body.clientWidth;
var h = (document.body.clientHeight || document.documentElement.clientHeight);
var wnd = new mxWindow('Title', frame, (w-200)/2, (h-200)/3, 200, 200);
wnd.setVisible(true);

To limit the movement of a window, eg. to keep it from being moved beyond the top, left corner the following method can be overridden (recommended):

wnd.setLocation = function(x, y)
{
  x = Math.max(0, x);
  y = Math.max(0, y);
  mxWindow.prototype.setLocation.apply(this, arguments);
};

Or the following event handler can be used

wnd.addListener(mxEvent.MOVE, function(e)
{
  wnd.setLocation(Math.max(0, wnd.getX()), Math.max(0, wnd.getY()));
});

To keep a window inside the current window

mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
{
  var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  var x = this.window.getX();
  var y = this.window.getY();

  if (x + this.window.table.clientWidth > iw)
  {
    x = Math.max(0, iw - this.window.table.clientWidth);
  }

  if (y + this.window.table.clientHeight > ih)
  {
    y = Math.max(0, ih - this.window.table.clientHeight);
  }

  if (this.window.getX() != x || this.window.getY() != y)
  {
    this.window.setLocation(x, y);
  }
}));
Summary
Events
mxEvent.MOVE_STARTFires before the window is moved.
mxEvent.MOVEFires while the window is being moved.
mxEvent.MOVE_ENDFires after the window is moved.
mxEvent.RESIZE_STARTFires before the window is resized.
mxEvent.RESIZEFires while the window is being resized.
mxEvent.RESIZE_ENDFires after the window is resized.
mxEvent.MAXIMIZEFires after the window is maximized.
mxEvent.MINIMIZEFires after the window is minimized.
mxEvent.NORMALIZEFires after the window is normalized, that is, it returned from maximized or minimized state.
mxEvent.ACTIVATEFires after a window is activated.
mxEvent.SHOWFires after the window is shown.
mxEvent.HIDEFires after the window is hidden.
mxEvent.CLOSEFires before the window is closed.
mxEvent.DESTROYFires before the window is destroyed.
Functions
mxWindowConstructs a new window with the given dimension and title to display the specified content.
Variables
closeImageURL of the image to be used for the close icon in the titlebar.
minimizeImageURL of the image to be used for the minimize icon in the titlebar.
normalizeImageURL of the image to be used for the normalize icon in the titlebar.
maximizeImageURL of the image to be used for the maximize icon in the titlebar.
normalizeImageURL of the image to be used for the resize icon.
visibleBoolean flag that represents the visible state of the window.
minimumSizemxRectangle that specifies the minimum width and height of the window.
destroyOnCloseSpecifies if the window should be destroyed when it is closed.
contentHeightCorrectionDefines the correction factor for computing the height of the contentWrapper.
titleReference to the DOM node (TD) that contains the title.
contentReference to the DOM node that represents the window content.
Functions
initInitializes the DOM tree that represents the window.
setTitleSets the window title to the given string.
setScrollableSets if the window contents should be scrollable.
activatePuts the window on top of all other windows.
getElementReturuns the outermost DOM node that makes up the window.
fitMakes sure the window is inside the client area of the window.
isResizableReturns true if the window is resizable.
setResizableSets if the window should be resizable.
setSizeSets the size of the window.
setMinimizableSets if the window is minimizable.
getMinimumSizeReturns an mxRectangle that specifies the size for the minimized window.
installMinimizeHandlerInstalls the event listeners required for minimizing the window.
setMaximizableSets if the window is maximizable.
installMaximizeHandlerInstalls the event listeners required for maximizing the window.
installMoveHandlerInstalls the event listeners required for moving the window.
setLocationSets the upper, left corner of the window.
getXReturns the current position on the x-axis.
getYReturns the current position on the y-axis.
installCloseHandlerAdds the closeImage as a new image node in <closeImg> and installs the <close> event.
setImageSets the image associated with the window.
setClosableSets the image associated with the window.
isVisibleReturns true if the window is visible.
setVisibleShows or hides the window depending on the given flag.
showShows the window.
hideHides the window.
destroyDestroys the window and removes all associated resources.

Events

mxEvent.MOVE_START

Fires before the window is moved.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE

Fires while the window is being moved.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE_END

Fires after the window is moved.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_START

Fires before the window is resized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE

Fires while the window is being resized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_END

Fires after the window is resized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MAXIMIZE

Fires after the window is maximized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.MINIMIZE

Fires after the window is minimized.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.NORMALIZE

Fires after the window is normalized, that is, it returned from maximized or minimized state.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.ACTIVATE

Fires after a window is activated.  The <code>previousWindow</code> property contains the previous window.  The event sender is the active window.

mxEvent.SHOW

Fires after the window is shown.  This event has no properties.

mxEvent.HIDE

Fires after the window is hidden.  This event has no properties.

mxEvent.CLOSE

Fires before the window is closed.  The <code>event</code> property contains the corresponding mouse event.

mxEvent.DESTROY

Fires before the window is destroyed.  This event has no properties.

Functions

mxWindow

function mxWindow(title,
content,
x,
y,
width,
height,
minimizable,
movable,
replaceNode,
style)

Constructs a new window with the given dimension and title to display the specified content.  The window elements use the given style as a prefix for the classnames of the respective window elements, namely, the window title and window pane.  The respective postfixes are appended to the given stylename as follows:

styleBase style for the window.
style+TitleStyle for the window title.
style+PaneStyle for the window pane.

The default value for style is mxWindow, resulting in the following classnames for the window elements: mxWindow, mxWindowTitle and mxWindowPane.

If replaceNode is given then the window replaces the given DOM node in the document.

Parameters

titleString that represents the title of the new window.
contentDOM node that is used as the window content.
xX-coordinate of the window location.
yY-coordinate of the window location.
widthWidth of the window.
heightOptional height of the window.  Default is to match the height of the content at the specified width.
minimizableOptional boolean indicating if the window is minimizable.  Default is true.
movableOptional boolean indicating if the window is movable.  Default is true.
replaceNodeOptional DOM node that the window should replace.
styleOptional base classname for the window elements.  Default is mxWindow.

Variables

closeImage

mxWindow.prototype.closeImage

URL of the image to be used for the close icon in the titlebar.

minimizeImage

mxWindow.prototype.minimizeImage

URL of the image to be used for the minimize icon in the titlebar.

normalizeImage

mxWindow.prototype.normalizeImage

URL of the image to be used for the normalize icon in the titlebar.

maximizeImage

mxWindow.prototype.maximizeImage

URL of the image to be used for the maximize icon in the titlebar.

normalizeImage

URL of the image to be used for the resize icon.

visible

mxWindow.prototype.visible

Boolean flag that represents the visible state of the window.

minimumSize

mxWindow.prototype.minimumSize

mxRectangle that specifies the minimum width and height of the window.  Default is (50, 40).

destroyOnClose

mxWindow.prototype.destroyOnClose

Specifies if the window should be destroyed when it is closed.  If this is false then the window is hidden using setVisible.  Default is true.

contentHeightCorrection

mxWindow.prototype.contentHeightCorrection

Defines the correction factor for computing the height of the contentWrapper.  Default is 6 for IE 7/8 standards mode and 2 for all other browsers and modes.

title

mxWindow.prototype.title

Reference to the DOM node (TD) that contains the title.

content

mxWindow.prototype.content

Reference to the DOM node that represents the window content.

Functions

init

mxWindow.prototype.init = function(x,
y,
width,
height,
style)

Initializes the DOM tree that represents the window.

setTitle

mxWindow.prototype.setTitle = function(title)

Sets the window title to the given string.  HTML markup inside the title will be escaped.

setScrollable

mxWindow.prototype.setScrollable = function(scrollable)

Sets if the window contents should be scrollable.

activate

mxWindow.prototype.activate = function()

Puts the window on top of all other windows.

getElement

mxWindow.prototype.getElement = function()

Returuns the outermost DOM node that makes up the window.

fit

mxWindow.prototype.fit = function()

Makes sure the window is inside the client area of the window.

isResizable

mxWindow.prototype.isResizable = function()

Returns true if the window is resizable.

setResizable

mxWindow.prototype.setResizable = function(resizable)

Sets if the window should be resizable.  To avoid interference with some built-in features of IE10 and later, the use of the following code is recommended if there are resizable mxWindows in the page:

if (mxClient.IS_POINTER)
{
  document.body.style.msTouchAction = 'none';
}

setSize

mxWindow.prototype.setSize = function(width,
height)

Sets the size of the window.

setMinimizable

mxWindow.prototype.setMinimizable = function(minimizable)

Sets if the window is minimizable.

getMinimumSize

mxWindow.prototype.getMinimumSize = function()

Returns an mxRectangle that specifies the size for the minimized window.  A width or height of 0 means keep the existing width or height.  This implementation returns the height of the window title and keeps the width.

installMinimizeHandler

mxWindow.prototype.installMinimizeHandler = function()

Installs the event listeners required for minimizing the window.

setMaximizable

mxWindow.prototype.setMaximizable = function(maximizable)

Sets if the window is maximizable.

installMaximizeHandler

mxWindow.prototype.installMaximizeHandler = function()

Installs the event listeners required for maximizing the window.

installMoveHandler

mxWindow.prototype.installMoveHandler = function()

Installs the event listeners required for moving the window.

setLocation

mxWindow.prototype.setLocation = function(x,
y)

Sets the upper, left corner of the window.

getX

mxWindow.prototype.getX = function()

Returns the current position on the x-axis.

getY

mxWindow.prototype.getY = function()

Returns the current position on the y-axis.

installCloseHandler

mxWindow.prototype.installCloseHandler = function()

Adds the closeImage as a new image node in <closeImg> and installs the <close> event.

setImage

mxWindow.prototype.setImage = function(image)

Sets the image associated with the window.

Parameters

imageURL of the image to be used.

setClosable

mxWindow.prototype.setClosable = function(closable)

Sets the image associated with the window.

Parameters

closableBoolean specifying if the window should be closable.

isVisible

mxWindow.prototype.isVisible = function()

Returns true if the window is visible.

setVisible

mxWindow.prototype.setVisible = function(visible)

Shows or hides the window depending on the given flag.

Parameters

visibleBoolean indicating if the window should be made visible.

show

mxWindow.prototype.show = function()

Shows the window.

hide

mxWindow.prototype.hide = function()

Hides the window.

destroy

mxWindow.prototype.destroy = function()

Destroys the window and removes all associated resources.  Fires a destroy event prior to destroying the window.

mxForm

A simple class for creating HTML forms.

Summary
Functions
mxFormCreates a HTML table using the specified classname.
Variables
tableHolds the DOM node that represents the table.
bodyHolds the DOM node that represents the tbody (table body).
Functions
getTableReturns the table that contains this form.
addButtonsHelper method to add an OK and Cancel button using the respective functions.
addTextAdds an input for the given name, type and value and returns it.
addCheckboxAdds a checkbox for the given name and value and returns the textfield.
addTextareaAdds a textarea for the given name and value and returns the textarea.
addComboAdds a combo for the given name and returns the combo.
addOptionAdds an option for the given label to the specified combo.
addFieldAdds a new row with the name and the input field in two columns and returns the given input.

Functions

mxForm

function mxForm(className)

Creates a HTML table using the specified classname.

Variables

table

mxForm.prototype.table

Holds the DOM node that represents the table.

body

mxForm.prototype.body

Holds the DOM node that represents the tbody (table body).  New rows can be added to this object using DOM API.

Functions

getTable

mxForm.prototype.getTable = function()

Returns the table that contains this form.

addButtons

mxForm.prototype.addButtons = function(okFunct,
cancelFunct)

Helper method to add an OK and Cancel button using the respective functions.

addText

mxForm.prototype.addText = function(name,
value,
type)

Adds an input for the given name, type and value and returns it.

addCheckbox

mxForm.prototype.addCheckbox = function(name,
value)

Adds a checkbox for the given name and value and returns the textfield.

addTextarea

mxForm.prototype.addTextarea = function(name,
value,
rows)

Adds a textarea for the given name and value and returns the textarea.

addCombo

mxForm.prototype.addCombo = function(name,
isMultiSelect,
size)

Adds a combo for the given name and returns the combo.

addOption

mxForm.prototype.addOption = function(combo,
label,
value,
isSelected)

Adds an option for the given label to the specified combo.

addField

mxForm.prototype.addField = function(name,
input)

Adds a new row with the name and the input field in two columns and returns the given input.

mxImage

Encapsulates the URL, width and height of an image.

Summary
Functions
mxImageConstructs a new image.
Variables
srcString that specifies the URL of the image.
widthInteger that specifies the width of the image.
heightInteger that specifies the height of the image.

Functions

mxImage

function mxImage(src,
width,
height)

Constructs a new image.

Variables

src

mxImage.prototype.src

String that specifies the URL of the image.

width

mxImage.prototype.width

Integer that specifies the width of the image.

height

mxImage.prototype.height

Integer that specifies the height of the image.

mxDivResizer

Maintains the size of a div element in Internet Explorer.  This is a workaround for the right and bottom style being ignored in IE.

If you need a div to cover the scrollwidth and -height of a document, then you can use this class as follows:

var resizer = new mxDivResizer(background);
resizer.getDocumentHeight = function()
{
  return document.body.scrollHeight;
}
resizer.getDocumentWidth = function()
{
  return document.body.scrollWidth;
}
resizer.resize();
Summary
Functions
mxDivResizerConstructs an object that maintains the size of a div element when the window is being resized.
resizeWidthBoolean specifying if the width should be updated.
resizeHeightBoolean specifying if the height should be updated.
handlingResizeBoolean specifying if the width should be updated.
resizeUpdates the style of the DIV after the window has been resized.
getDocumentWidthHook for subclassers to return the width of the document (without scrollbars).
getDocumentHeightHook for subclassers to return the height of the document (without scrollbars).

Functions

mxDivResizer

function mxDivResizer(div,
container)

Constructs an object that maintains the size of a div element when the window is being resized.  This is only required for Internet Explorer as it ignores the respective stylesheet information for DIV elements.

Parameters

divReference to the DOM node whose size should be maintained.
containerOptional Container that contains the div.  Default is the window.

resizeWidth

Boolean specifying if the width should be updated.

resizeHeight

Boolean specifying if the height should be updated.

handlingResize

Boolean specifying if the width should be updated.

resize

mxDivResizer.prototype.resize = function()

Updates the style of the DIV after the window has been resized.

getDocumentWidth

mxDivResizer.prototype.getDocumentWidth = function()

Hook for subclassers to return the width of the document (without scrollbars).

getDocumentHeight

mxDivResizer.prototype.getDocumentHeight = function()

Hook for subclassers to return the height of the document (without scrollbars).

mxDragSource

Wrapper to create a drag source from a DOM element so that the element can be dragged over a graph and dropped into the graph as a new cell.

Problem is that in the dropHandler the current preview location is not available, so the preview and the dropHandler must match.

Summary
Functions
mxDragSourceConstructs a new drag source for the given element.
Variables
elementReference to the DOM node which was made draggable.
dropHandlerHolds the DOM node that is used to represent the drag preview.
dragOffsetmxPoint that specifies the offset of the dragElement.
dragElementHolds the DOM node that is used to represent the drag preview.
previewElementOptional mxRectangle that specifies the unscaled size of the preview.
enabledSpecifies if this drag source is enabled.
currentGraphReference to the mxGraph that is the current drop target.
currentDropTargetHolds the current drop target under the mouse.
currentPointHolds the current drop location.
currentGuideHolds an mxGuide for the currentGraph if <dragPreview> is not null.
currentGuideHolds an mxGuide for the currentGraph if <dragPreview> is not null.
autoscrollSpecifies if the graph should scroll automatically.
guidesEnabledSpecifies if mxGuide should be enabled.
gridEnabledSpecifies if the grid should be allowed.
highlightDropTargetsSpecifies if drop targets should be highlighted.
dragElementZIndexZIndex for the drag element.
dragElementOpacityOpacity of the drag element in %.
checkEventSourceWhether the event source should be checked in <graphContainerEvent>.
Functions
isEnabledReturns enabled.
setEnabledSets enabled.
isGuidesEnabledReturns guidesEnabled.
setGuidesEnabledSets guidesEnabled.
isGridEnabledReturns gridEnabled.
setGridEnabledSets gridEnabled.
getGraphForEventReturns the graph for the given mouse event.
getDropTargetReturns the drop target for the given graph and coordinates.
createDragElementCreates and returns a clone of the <dragElementPrototype> or the element if the former is not defined.
createPreviewElementCreates and returns an element which can be used as a preview in the given graph.
isActiveReturns true if this drag source is active.
resetStops and removes everything and restores the state of the object.
mouseDownReturns the drop target for the given graph and coordinates.
startDragCreates the dragElement using createDragElement.
stopDragInvokes removeDragElement.
removeDragElementRemoves and destroys the dragElement.
getElementForEventReturns the topmost element under the given event.
graphContainsEventReturns true if the given graph contains the given event.
mouseMoveGets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.
mouseUpProcesses the mouse up event and invokes drop, dragExit and stopDrag as required.
removeListenersActives the given graph as a drop target.
dragEnterActives the given graph as a drop target.
dragExitDeactivates the given graph as a drop target.
dragOverImplements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.
dropReturns the drop target for the given graph and coordinates.

Functions

mxDragSource

function mxDragSource(element,
dropHandler)

Constructs a new drag source for the given element.

Variables

element

mxDragSource.prototype.element

Reference to the DOM node which was made draggable.

dropHandler

mxDragSource.prototype.dropHandler

Holds the DOM node that is used to represent the drag preview.  If this is null then the source element will be cloned and used for the drag preview.

dragOffset

mxDragSource.prototype.dragOffset

mxPoint that specifies the offset of the dragElement.  Default is null.

dragElement

mxDragSource.prototype.dragElement

Holds the DOM node that is used to represent the drag preview.  If this is null then the source element will be cloned and used for the drag preview.

previewElement

mxDragSource.prototype.previewElement

Optional mxRectangle that specifies the unscaled size of the preview.

enabled

mxDragSource.prototype.enabled

Specifies if this drag source is enabled.  Default is true.

currentGraph

mxDragSource.prototype.currentGraph

Reference to the mxGraph that is the current drop target.

currentDropTarget

mxDragSource.prototype.currentDropTarget

Holds the current drop target under the mouse.

currentPoint

mxDragSource.prototype.currentPoint

Holds the current drop location.

currentGuide

mxDragSource.prototype.currentGuide

Holds an mxGuide for the currentGraph if <dragPreview> is not null.

currentGuide

Holds an mxGuide for the currentGraph if <dragPreview> is not null.

autoscroll

mxDragSource.prototype.autoscroll

Specifies if the graph should scroll automatically.  Default is true.

guidesEnabled

mxDragSource.prototype.guidesEnabled

Specifies if mxGuide should be enabled.  Default is true.

gridEnabled

mxDragSource.prototype.gridEnabled

Specifies if the grid should be allowed.  Default is true.

highlightDropTargets

mxDragSource.prototype.highlightDropTargets

Specifies if drop targets should be highlighted.  Default is true.

dragElementZIndex

mxDragSource.prototype.dragElementZIndex

ZIndex for the drag element.  Default is 100.

dragElementOpacity

mxDragSource.prototype.dragElementOpacity

Opacity of the drag element in %.  Default is 70.

checkEventSource

mxDragSource.prototype.checkEventSource

Whether the event source should be checked in <graphContainerEvent>.  Default is true.

Functions

isEnabled

mxDragSource.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxDragSource.prototype.setEnabled = function(value)

Sets enabled.

isGuidesEnabled

mxDragSource.prototype.isGuidesEnabled = function()

Returns guidesEnabled.

setGuidesEnabled

mxDragSource.prototype.setGuidesEnabled = function(value)

Sets guidesEnabled.

isGridEnabled

mxDragSource.prototype.isGridEnabled = function()

Returns gridEnabled.

setGridEnabled

mxDragSource.prototype.setGridEnabled = function(value)

Sets gridEnabled.

getGraphForEvent

mxDragSource.prototype.getGraphForEvent = function(evt)

Returns the graph for the given mouse event.  This implementation returns null.

getDropTarget

mxDragSource.prototype.getDropTarget = function(graph,
x,
y,
evt)

Returns the drop target for the given graph and coordinates.  This implementation uses mxGraph.getCellAt.

createDragElement

mxDragSource.prototype.createDragElement = function(evt)

Creates and returns a clone of the <dragElementPrototype> or the element if the former is not defined.

createPreviewElement

mxDragSource.prototype.createPreviewElement = function(graph)

Creates and returns an element which can be used as a preview in the given graph.

isActive

mxDragSource.prototype.isActive = function()

Returns true if this drag source is active.

reset

mxDragSource.prototype.reset = function()

Stops and removes everything and restores the state of the object.

mouseDown

mxDragSource.prototype.mouseDown = function(evt)

Returns the drop target for the given graph and coordinates.  This implementation uses mxGraph.getCellAt.

To ignore popup menu events for a drag source, this function can be overridden as follows.

var mouseDown = dragSource.mouseDown;

dragSource.mouseDown = function(evt)
{
  if (!mxEvent.isPopupTrigger(evt))
  {
    mouseDown.apply(this, arguments);
  }
};

startDrag

mxDragSource.prototype.startDrag = function(evt)

Creates the dragElement using createDragElement.

stopDrag

mxDragSource.prototype.stopDrag = function()

Invokes removeDragElement.

removeDragElement

mxDragSource.prototype.removeDragElement = function()

Removes and destroys the dragElement.

getElementForEvent

mxDragSource.prototype.getElementForEvent = function(evt)

Returns the topmost element under the given event.

graphContainsEvent

mxDragSource.prototype.graphContainsEvent = function(graph,
evt)

Returns true if the given graph contains the given event.

mouseMove

mxDragSource.prototype.mouseMove = function(evt)

Gets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.

mouseUp

mxDragSource.prototype.mouseUp = function(evt)

Processes the mouse up event and invokes drop, dragExit and stopDrag as required.

removeListeners

mxDragSource.prototype.removeListeners = function()

Actives the given graph as a drop target.

dragEnter

mxDragSource.prototype.dragEnter = function(graph,
evt)

Actives the given graph as a drop target.

dragExit

mxDragSource.prototype.dragExit = function(graph,
evt)

Deactivates the given graph as a drop target.

dragOver

mxDragSource.prototype.dragOver = function(graph,
evt)

Implements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.

drop

mxDragSource.prototype.drop = function(graph,
evt,
dropTarget,
x,
y)

Returns the drop target for the given graph and coordinates.  This implementation uses mxGraph.getCellAt.

mxToolbar

Creates a toolbar inside a given DOM node.  The toolbar may contain icons, buttons and combo boxes.

Summary
Events
mxEvent.SELECTFires when an item was selected in the toolbar.
Functions
mxToolbarConstructs a toolbar in the specified container.
Variables
containerReference to the DOM nodes that contains the toolbar.
enabledSpecifies if events are handled.
noResetSpecifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar.
updateDefaultModeBoolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode.
Functions
addItemAdds the given function as an image with the specified title and icon and returns the new image node.
addComboAdds and returns a new SELECT element using the given style.
addComboAdds and returns a new SELECT element using the given title as the default element.
addOptionAdds and returns a new OPTION element inside the given SELECT element.
addSwitchModeAdds a new selectable item to the toolbar.
addModeAdds a new item to the toolbar.
selectModeResets the state of the previously selected mode and displays the given DOM node as selected.
resetModeSelects the default mode and resets the state of the previously selected mode.
addSeparatorAdds the specifies image as a separator.
addBreakAdds a break to the container.
addLineAdds a horizontal line to the container.
destroyRemoves the toolbar and all its associated resources.

Events

mxEvent.SELECT

Fires when an item was selected in the toolbar.  The <code>function</code> property contains the function that was selected in selectMode.

Functions

mxToolbar

function mxToolbar(container)

Constructs a toolbar in the specified container.

Parameters

containerDOM node that contains the toolbar.

Variables

container

mxToolbar.prototype.container

Reference to the DOM nodes that contains the toolbar.

enabled

mxToolbar.prototype.enabled

Specifies if events are handled.  Default is true.

noReset

mxToolbar.prototype.noReset

Specifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar.  Default is false.  This is set to true if the toolbar item is double clicked to avoid a reset after a single use of the item.

updateDefaultMode

mxToolbar.prototype.updateDefaultMode

Boolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode.  Default is true, that is the last selected switch mode is the default mode.  The default mode is the mode to be selected after a reset of the toolbar.  If this is false, then the default mode is the first inserted mode item regardless of what was last selected.  Otherwise, the selected item after a reset is the previously selected item.

Functions

addItem

mxToolbar.prototype.addItem = function(title,
icon,
funct,
pressedIcon,
style,
factoryMethod)

Adds the given function as an image with the specified title and icon and returns the new image node.

Parameters

titleOptional string that is used as the tooltip.
iconOptional URL of the image to be used.  If no URL is given, then a button is created.
functFunction to execute on a mouse click.
pressedIconOptional URL of the pressed image.  Default is a gray background.
styleOptional style classname.  Default is mxToolbarItem.
factoryMethodOptional factory method for popup menu, eg. function(menu, evt, cell) { menu.addItem(‘Hello, World!’); }

addCombo

mxToolbar.prototype.addCombo = function(style)

Adds and returns a new SELECT element using the given style.  The element is placed inside a DIV with the mxToolbarComboContainer style classname.

Parameters

styleOptional style classname.  Default is mxToolbarCombo.

addCombo

Adds and returns a new SELECT element using the given title as the default element.  The selection is reset to this element after each change.

Parameters

titleString that specifies the title of the default element.
styleOptional style classname.  Default is mxToolbarCombo.

addOption

mxToolbar.prototype.addOption = function(combo,
title,
value)

Adds and returns a new OPTION element inside the given SELECT element.  If the given value is a function then it is stored in the option’s funct field.

Parameters

comboSELECT element that will contain the new entry.
titleString that specifies the title of the option.
valueSpecifies the value associated with this option.

addSwitchMode

mxToolbar.prototype.addSwitchMode = function(title,
icon,
funct,
pressedIcon,
style)

Adds a new selectable item to the toolbar.  Only one switch mode item may be selected at a time.  The currently selected item is the default item after a reset of the toolbar.

addMode

mxToolbar.prototype.addMode = function(title,
icon,
funct,
pressedIcon,
style,
toggle)

Adds a new item to the toolbar.  The selection is typically reset after the item has been consumed, for example by adding a new vertex to the graph.  The reset is not carried out if the item is double clicked.

The function argument uses the following signature: funct(evt, cell) where evt is the native mouse event and cell is the cell under the mouse.

selectMode

mxToolbar.prototype.selectMode = function(domNode,
funct)

Resets the state of the previously selected mode and displays the given DOM node as selected.  This function fires a select event with the given function as a parameter.

resetMode

mxToolbar.prototype.resetMode = function(forced)

Selects the default mode and resets the state of the previously selected mode.

addSeparator

mxToolbar.prototype.addSeparator = function(icon)

Adds the specifies image as a separator.

Parameters

iconURL of the separator icon.

addBreak

mxToolbar.prototype.addBreak = function()

Adds a break to the container.

addLine

mxToolbar.prototype.addLine = function()

Adds a horizontal line to the container.

destroy

mxToolbar.prototype.destroy = function ()

Removes the toolbar and all its associated resources.

mxUndoableEdit

Implements a composite undoable edit.  Here is an example for a custom change which gets executed via the model:

function CustomChange(model, name)
{
  this.model = model;
  this.name = name;
  this.previous = name;
};

CustomChange.prototype.execute = function()
{
  var tmp = this.model.name;
  this.model.name = this.previous;
  this.previous = tmp;
};

var name = prompt('Enter name');
graph.model.execute(new CustomChange(graph.model, name));
Summary
Events
mxEvent.EXECUTEDFires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.START_EDITFires before a set of changes will be executed in undo or redo.
mxEvent.END_EDITFires after a set of changeswas executed in undo or redo.
Functions
mxUndoableEditConstructs a new undoable edit for the given source.
Variables
sourceSpecifies the source of the edit.
changesArray that contains the changes that make up this edit.
significantSpecifies if the undoable change is significant.
undoneSpecifies if this edit has been undone.
redoneSpecifies if this edit has been redone.
Functions
isEmptyReturns true if the this edit contains no changes.
isSignificantReturns significant.
addAdds the specified change to this edit.
notifyHook to notify any listeners of the changes after an undo or redo has been carried out.
dieHook to free resources after the edit has been removed from the command history.
undoUndoes all changes in this edit.
redoRedoes all changes in this edit.

Events

mxEvent.EXECUTED

Fires between START_EDIT and END_EDIT after an atomic change was executed.  The <code>change</code> property contains the change that was executed.

mxEvent.START_EDIT

Fires before a set of changes will be executed in undo or redo.  This event contains no properties.

mxEvent.END_EDIT

Fires after a set of changeswas executed in undo or redo.  This event contains no properties.

Functions

mxUndoableEdit

function mxUndoableEdit(source,
significant)

Constructs a new undoable edit for the given source.

Variables

source

mxUndoableEdit.prototype.source

Specifies the source of the edit.

changes

mxUndoableEdit.prototype.changes

Array that contains the changes that make up this edit.  The changes are expected to either have an undo and redo function, or an execute function.  Default is an empty array.

significant

mxUndoableEdit.prototype.significant

Specifies if the undoable change is significant.  Default is true.

undone

mxUndoableEdit.prototype.undone

Specifies if this edit has been undone.  Default is false.

redone

mxUndoableEdit.prototype.redone

Specifies if this edit has been redone.  Default is false.

Functions

isEmpty

mxUndoableEdit.prototype.isEmpty = function()

Returns true if the this edit contains no changes.

isSignificant

mxUndoableEdit.prototype.isSignificant = function()

Returns significant.

add

mxUndoableEdit.prototype.add = function(change)

Adds the specified change to this edit.  The change is an object that is expected to either have an undo and redo, or an execute function.

notify

mxUndoableEdit.prototype.notify = function()

Hook to notify any listeners of the changes after an undo or redo has been carried out.  This implementation is empty.

die

mxUndoableEdit.prototype.die = function()

Hook to free resources after the edit has been removed from the command history.  This implementation is empty.

undo

mxUndoableEdit.prototype.undo = function()

Undoes all changes in this edit.

redo

mxUndoableEdit.prototype.redo = function()

Redoes all changes in this edit.

mxUndoManager

Implements a command history.  When changing the graph model, an <mxUndoableChange> object is created at the start of the transaction (when model.beginUpdate is called).  All atomic changes are then added to this object until the last model.endUpdate call, at which point the mxUndoableEdit is dispatched in an event, and added to the history inside mxUndoManager.  This is done by an event listener in mxEditor.installUndoHandler.

Each atomic change of the model is represented by an object (eg.  mxRootChange, mxChildChange, mxTerminalChange etc) which contains the complete undo information.  The mxUndoManager also listens to the mxGraphView and stores it’s changes to the current root as insignificant undoable changes, so that drilling (step into, step up) is undone.

This means when you execute an atomic change on the model, then change the current root on the view and click undo, the change of the root will be undone together with the change of the model so that the display represents the state at which the model was changed.  However, these changes are not transmitted for sharing as they do not represent a state change.

Example

When adding an undo manager to a graph, make sure to add it to the model and the view as well to maintain a consistent display across multiple undo/redo steps.

var undoManager = new mxUndoManager();
var listener = function(sender, evt)
{
  undoManager.undoableEditHappened(evt.getProperty('edit'));
};
graph.getModel().addListener(mxEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener);

The code creates a function that informs the undoManager of an undoable edit and binds it to the undo event of mxGraphModel and mxGraphView using mxEventSource.addListener.

Summary
Events
mxEvent.CLEARFires after clear was invoked.
mxEvent.UNDOFires afer a significant edit was undone in undo.
mxEvent.REDOFires afer a significant edit was redone in redo.
mxEvent.ADDFires after an undoable edit was added to the history.
Functions
mxUndoManagerConstructs a new undo manager with the given history size.
Variables
sizeMaximum command history size.
historyArray that contains the steps of the command history.
indexOfNextAddIndex of the element to be added next.
Functions
isEmptyReturns true if the history is empty.
clearClears the command history.
canUndoReturns true if an undo is possible.
undoUndoes the last change.
canRedoReturns true if a redo is possible.
redoRedoes the last change.
undoableEditHappenedMethod to be called to add new undoable edits to the history.
trimRemoves all pending steps after indexOfNextAdd from the history, invoking die on each edit.

Events

mxEvent.CLEAR

Fires after clear was invoked.  This event has no properties.

mxEvent.UNDO

Fires afer a significant edit was undone in undo.  The <code>edit</code> property contains the mxUndoableEdit that was undone.

mxEvent.REDO

Fires afer a significant edit was redone in redo.  The <code>edit</code> property contains the mxUndoableEdit that was redone.

mxEvent.ADD

Fires after an undoable edit was added to the history.  The <code>edit</code> property contains the mxUndoableEdit that was added.

Functions

mxUndoManager

function mxUndoManager(size)

Constructs a new undo manager with the given history size.  If no history size is given, then a default size of 100 steps is used.

Variables

size

mxUndoManager.prototype.size

Maximum command history size.  0 means unlimited history.  Default is 100.

history

mxUndoManager.prototype.history

Array that contains the steps of the command history.

indexOfNextAdd

mxUndoManager.prototype.indexOfNextAdd

Index of the element to be added next.

Functions

isEmpty

mxUndoManager.prototype.isEmpty = function()

Returns true if the history is empty.

clear

mxUndoManager.prototype.clear = function()

Clears the command history.

canUndo

mxUndoManager.prototype.canUndo = function()

Returns true if an undo is possible.

undo

mxUndoManager.prototype.undo = function()

Undoes the last change.

canRedo

mxUndoManager.prototype.canRedo = function()

Returns true if a redo is possible.

redo

mxUndoManager.prototype.redo = function()

Redoes the last change.

undoableEditHappened

mxUndoManager.prototype.undoableEditHappened = function(undoableEdit)

Method to be called to add new undoable edits to the history.

trim

mxUndoManager.prototype.trim = function()

Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit.  This is called from undoableEditHappened.

mxUrlConverter

Converts relative and absolute URLs to absolute URLs with protocol and domain.

Summary
Variables
enabledSpecifies if the converter is enabled.
baseUrlSpecifies the base URL to be used as a prefix for relative URLs.
baseDomainSpecifies the base domain to be used as a prefix for absolute URLs.
Functions
updateBaseUrlPrivate helper function to update the base URL.
isEnabledReturns enabled.
setEnabledSets enabled.
getBaseUrlReturns baseUrl.
setBaseUrlSets baseUrl.
getBaseDomainReturns baseDomain.
setBaseDomainSets baseDomain.
isRelativeUrlReturns true if the given URL is relative.
convertConverts the given URL to an absolute URL with protol and domain.

Variables

enabled

mxUrlConverter.prototype.enabled

Specifies if the converter is enabled.  Default is true.

baseUrl

mxUrlConverter.prototype.baseUrl

Specifies the base URL to be used as a prefix for relative URLs.

baseDomain

mxUrlConverter.prototype.baseDomain

Specifies the base domain to be used as a prefix for absolute URLs.

Functions

updateBaseUrl

mxUrlConverter.prototype.updateBaseUrl = function()

Private helper function to update the base URL.

isEnabled

mxUrlConverter.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxUrlConverter.prototype.setEnabled = function(value)

Sets enabled.

getBaseUrl

mxUrlConverter.prototype.getBaseUrl = function()

Returns baseUrl.

setBaseUrl

mxUrlConverter.prototype.setBaseUrl = function(value)

Sets baseUrl.

getBaseDomain

mxUrlConverter.prototype.getBaseDomain = function()

Returns baseDomain.

setBaseDomain

mxUrlConverter.prototype.setBaseDomain = function(value)

Sets baseDomain.

isRelativeUrl

mxUrlConverter.prototype.isRelativeUrl = function(url)

Returns true if the given URL is relative.

convert

mxUrlConverter.prototype.convert = function(url)

Converts the given URL to an absolute URL with protol and domain.  Relative URLs are first converted to absolute URLs.

mxPanningManager

Implements a handler for panning.

Summary
Variables
damperDamper value for the panning.
delayDelay in milliseconds for the panning.
handleMouseOutSpecifies if mouse events outside of the component should be handled.
borderBorder to handle automatic panning inside the component.

Variables

damper

mxPanningManager.prototype.damper

Damper value for the panning.  Default is 1/6.

delay

mxPanningManager.prototype.delay

Delay in milliseconds for the panning.  Default is 10.

handleMouseOut

mxPanningManager.prototype.handleMouseOut

Specifies if mouse events outside of the component should be handled.  Default is true.

border

mxPanningManager.prototype.border

Border to handle automatic panning inside the component.  Default is 0 (disabled).

mxPopupMenu

Basic popup menu.  To add a vertical scrollbar to a given submenu, the following code can be used.

var mxPopupMenuShowMenu = mxPopupMenu.prototype.showMenu;
mxPopupMenu.prototype.showMenu = function()
{
  mxPopupMenuShowMenu.apply(this, arguments);

  this.div.style.overflowY = 'auto';
  this.div.style.overflowX = 'hidden';
  this.div.style.maxHeight = '160px';
};
Summary
Functions
mxPopupMenuConstructs a popupmenu.
Events
mxEvent.SHOWFires after the menu has been shown in popup.
Variables
submenuImageURL of the image to be used for the submenu icon.
zIndexSpecifies the zIndex for the popupmenu and its shadow.
factoryMethodFunction that is used to create the popup menu.
useLeftButtonForPopupSpecifies if popupmenus should be activated by clicking the left mouse button.
enabledSpecifies if events are handled.
itemCountContains the number of times addItem has been called for a new menu.
autoExpandSpecifies if submenus should be expanded on mouseover.
smartSeparatorsSpecifies if separators should only be added if a menu item follows them.
labelsSpecifies if any labels should be visible.
Functions
initInitializes the shapes required for this vertex handler.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isPopupTriggerReturns true if the given event is a popupmenu trigger for the optional given cell.
addItemAdds the given item to the given parent item.
createSubmenuCreates the nodes required to add submenu items inside the given parent item.
showSubmenuShows the submenu inside the given parent row.
addSeparatorAdds a horizontal separator in the given parent item or the top-level menu if no parent is specified.
popupShows the popup menu for the given event and cell.
isMenuShowingReturns true if the menu is showing.
showMenuShows the menu.
hideMenuRemoves the menu and all submenus.
hideSubmenuRemoves all submenus inside the given parent.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxPopupMenu

Constructs a popupmenu.

Events

mxEvent.SHOW

Fires after the menu has been shown in popup.

Variables

submenuImage

mxPopupMenu.prototype.submenuImage

URL of the image to be used for the submenu icon.

zIndex

mxPopupMenu.prototype.zIndex

Specifies the zIndex for the popupmenu and its shadow.  Default is 1006.

factoryMethod

mxPopupMenu.prototype.factoryMethod

Function that is used to create the popup menu.  The function takes the current panning handler, the mxCell under the mouse and the mouse event that triggered the call as arguments.

useLeftButtonForPopup

mxPopupMenu.prototype.useLeftButtonForPopup

Specifies if popupmenus should be activated by clicking the left mouse button.  Default is false.

enabled

mxPopupMenu.prototype.enabled

Specifies if events are handled.  Default is true.

itemCount

mxPopupMenu.prototype.itemCount

Contains the number of times addItem has been called for a new menu.

autoExpand

mxPopupMenu.prototype.autoExpand

Specifies if submenus should be expanded on mouseover.  Default is false.

smartSeparators

mxPopupMenu.prototype.smartSeparators

Specifies if separators should only be added if a menu item follows them.  Default is false.

labels

mxPopupMenu.prototype.labels

Specifies if any labels should be visible.  Default is true.

Functions

init

mxPopupMenu.prototype.init = function()

Initializes the shapes required for this vertex handler.

isEnabled

mxPopupMenu.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxPopupMenu.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

isPopupTrigger

mxPopupMenu.prototype.isPopupTrigger = function(me)

Returns true if the given event is a popupmenu trigger for the optional given cell.

Parameters

memxMouseEvent that represents the mouse event.

addItem

mxPopupMenu.prototype.addItem = function(title,
image,
funct,
parent,
iconCls,
enabled,
active)

Adds the given item to the given parent item.  If no parent item is specified then the item is added to the top-level menu.  The return value may be used as the parent argument, ie. as a submenu item.  The return value is the table row that represents the item.

Paramters

titleString that represents the title of the menu item.
imageOptional URL for the image icon.
functFunction associated that takes a mouseup or touchend event.
parentOptional item returned by addItem.
iconClsOptional string that represents the CSS class for the image icon.  IconsCls is ignored if image is given.
enabledOptional boolean indicating if the item is enabled.  Default is true.
activeOptional boolean indicating if the menu should implement any event handling.  Default is true.

createSubmenu

mxPopupMenu.prototype.createSubmenu = function(parent)

Creates the nodes required to add submenu items inside the given parent item.  This is called in addItem if a parent item is used for the first time.  This adds various DOM nodes and a submenuImage to the parent.

Parameters

parentAn item returned by addItem.

showSubmenu

mxPopupMenu.prototype.showSubmenu = function(parent,
row)

Shows the submenu inside the given parent row.

addSeparator

mxPopupMenu.prototype.addSeparator = function(parent,
force)

Adds a horizontal separator in the given parent item or the top-level menu if no parent is specified.

Parameters

parentOptional item returned by addItem.
forceOptional boolean to ignore smartSeparators.  Default is false.

popup

mxPopupMenu.prototype.popup = function(x,
y,
cell,
evt)

Shows the popup menu for the given event and cell.

Example

graph.panningHandler.popup = function(x, y, cell, evt)
{
  mxUtils.alert('Hello, World!');
}

isMenuShowing

mxPopupMenu.prototype.isMenuShowing = function()

Returns true if the menu is showing.

showMenu

mxPopupMenu.prototype.showMenu = function()

Shows the menu.

hideMenu

mxPopupMenu.prototype.hideMenu = function()

Removes the menu and all submenus.

hideSubmenu

mxPopupMenu.prototype.hideSubmenu = function(parent)

Removes all submenus inside the given parent.

Parameters

parentAn item returned by addItem.

destroy

mxPopupMenu.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxAutoSaveManager

Manager for automatically saving diagrams.  The save hook must be implemented.

Example

var mgr = new mxAutoSaveManager(editor.graph);
mgr.save = function()
{
  mxLog.show();
  mxLog.debug('save');
};
Summary
Functions
mxAutoSaveManagerConstructs a new automatic layout for the given graph.
Variables
graphReference to the enclosing mxGraph.
autoSaveDelayMinimum amount of seconds between two consecutive autosaves.
autoSaveThrottleMinimum amount of seconds between two consecutive autosaves triggered by more than <autoSaveThreshhold> changes within a timespan of less than autoSaveDelay seconds.
autoSaveThresholdMinimum amount of ignored changes before an autosave.
ignoredChangesCounter for ignored changes in autosave.
lastSnapshotUsed for autosaving.
enabledSpecifies if event handling is enabled.
changeHandlerHolds the function that handles graph model changes.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
setGraphSets the graph that the layouts operate on.
saveEmpty hook that is called if the graph should be saved.
graphModelChangedInvoked when the graph model has changed.
resetResets all counters.
destroyRemoves all handlers from the graph and deletes the reference to it.

Functions

mxAutoSaveManager

function mxAutoSaveManager(graph)

Constructs a new automatic layout for the given graph.

Arguments

graphReference to the enclosing graph.

Variables

graph

mxAutoSaveManager.prototype.graph

Reference to the enclosing mxGraph.

autoSaveDelay

mxAutoSaveManager.prototype.autoSaveDelay

Minimum amount of seconds between two consecutive autosaves.  Eg. a value of 1 (s) means the graph is not stored more than once per second.  Default is 10.

autoSaveThrottle

mxAutoSaveManager.prototype.autoSaveThrottle

Minimum amount of seconds between two consecutive autosaves triggered by more than <autoSaveThreshhold> changes within a timespan of less than autoSaveDelay seconds.  Eg. a value of 1 (s) means the graph is not stored more than once per second even if there are more than autoSaveThreshold changes within that timespan.  Default is 2.

autoSaveThreshold

mxAutoSaveManager.prototype.autoSaveThreshold

Minimum amount of ignored changes before an autosave.  Eg. a value of 2 means after 2 change of the graph model the autosave will trigger if the condition below is true.  Default is 5.

ignoredChanges

mxAutoSaveManager.prototype.ignoredChanges

Counter for ignored changes in autosave.

lastSnapshot

mxAutoSaveManager.prototype.lastSnapshot

Used for autosaving.  See <autosave>.

enabled

mxAutoSaveManager.prototype.enabled

Specifies if event handling is enabled.  Default is true.

changeHandler

mxAutoSaveManager.prototype.changeHandler

Holds the function that handles graph model changes.

Functions

isEnabled

mxAutoSaveManager.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxAutoSaveManager.prototype.setEnabled = function(value)

Enables or disables event handling.  This implementation updates enabled.

Parameters

enabledBoolean that specifies the new enabled state.

setGraph

mxAutoSaveManager.prototype.setGraph = function(graph)

Sets the graph that the layouts operate on.

save

mxAutoSaveManager.prototype.save = function()

Empty hook that is called if the graph should be saved.

graphModelChanged

mxAutoSaveManager.prototype.graphModelChanged = function(changes)

Invoked when the graph model has changed.

reset

mxAutoSaveManager.prototype.reset = function()

Resets all counters.

destroy

mxAutoSaveManager.prototype.destroy = function()

Removes all handlers from the graph and deletes the reference to it.

mxAnimation

Implements a basic animation in JavaScript.

Summary
Functions
mxAnimationConstructs an animation.
Variables
delaySpecifies the delay between the animation steps.
threadReference to the thread while the animation is running.
Functions
isRunningReturns true if the animation is running.
startAnimationStarts the animation by repeatedly invoking updateAnimation.
updateAnimationHook for subclassers to implement the animation.
stopAnimationStops the animation by deleting the timer and fires an mxEvent.DONE.

Functions

mxAnimation

function mxAnimation(delay)

Constructs an animation.

Parameters

graphReference to the enclosing mxGraph.

Variables

delay

mxAnimation.prototype.delay

Specifies the delay between the animation steps.  Defaul is 30ms.

thread

mxAnimation.prototype.thread

Reference to the thread while the animation is running.

Functions

isRunning

mxAnimation.prototype.isRunning = function()

Returns true if the animation is running.

startAnimation

mxAnimation.prototype.startAnimation = function()

Starts the animation by repeatedly invoking updateAnimation.

updateAnimation

mxAnimation.prototype.updateAnimation = function()

Hook for subclassers to implement the animation.  Invoke stopAnimation when finished, startAnimation to resume.  This is called whenever the timer fires and fires an mxEvent.EXECUTE event with no properties.

stopAnimation

mxAnimation.prototype.stopAnimation = function()

Stops the animation by deleting the timer and fires an mxEvent.DONE.

mxMorphing

Implements animation for morphing cells.  Here is an example of using this class for animating the result of a layout algorithm:

graph.getModel().beginUpdate();
try
{
  var circleLayout = new mxCircleLayout(graph);
  circleLayout.execute(graph.getDefaultParent());
}
finally
{
  var morph = new mxMorphing(graph);
  morph.addListener(mxEvent.DONE, function()
  {
    graph.getModel().endUpdate();
  });

  morph.startAnimation();
}
Summary
Functions
mxMorphingConstructs an animation.
Variables
graphSpecifies the delay between the animation steps.
stepsSpecifies the maximum number of steps for the morphing.
stepContains the current step.
easeEase-off for movement towards the given vector.
cellsOptional array of cells to be animated.
Functions
updateAnimationAnimation step.
showShows the changes in the given mxCellStatePreview.
animateCellAnimates the given cell state using mxCellStatePreview.moveState.
stopRecursionReturns true if the animation should not recursively find more deltas for children if the given parent state has been animated.
getDeltaReturns the vector between the current rendered state and the future location of the state after the display will be updated.
getOriginForCellReturns the top, left corner of the given cell.

Functions

mxMorphing

function mxMorphing(graph,
steps,
ease,
delay)

Constructs an animation.

Parameters

graphReference to the enclosing mxGraph.
stepsOptional number of steps in the morphing animation.  Default is 6.
easeOptional easing constant for the animation.  Default is 1.5.
delayOptional delay between the animation steps.  Passed to mxAnimation.

Variables

graph

mxMorphing.prototype.graph

Specifies the delay between the animation steps.  Defaul is 30ms.

steps

mxMorphing.prototype.steps

Specifies the maximum number of steps for the morphing.

step

mxMorphing.prototype.step

Contains the current step.

ease

mxMorphing.prototype.ease

Ease-off for movement towards the given vector.  Larger values are slower and smoother.  Default is 4.

cells

mxMorphing.prototype.cells

Optional array of cells to be animated.  If this is not specified then all cells are checked and animated if they have been moved in the current transaction.

Functions

updateAnimation

mxMorphing.prototype.updateAnimation = function()

Animation step.

show

mxMorphing.prototype.show = function(move)

Shows the changes in the given mxCellStatePreview.

animateCell

mxMorphing.prototype.animateCell = function(cell,
move,
recurse)

Animates the given cell state using mxCellStatePreview.moveState.

stopRecursion

mxMorphing.prototype.stopRecursion = function(state,
delta)

Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.

getDelta

mxMorphing.prototype.getDelta = function(state)

Returns the vector between the current rendered state and the future location of the state after the display will be updated.

getOriginForCell

mxMorphing.prototype.getOriginForCell = function(cell)

Returns the top, left corner of the given cell.  TODO: Improve performance by using caching inside this method as the result per cell never changes during the lifecycle of this object.

mxImageBundle

Maps from keys to base64 encoded images or file locations.  All values must be URLs or use the format data:image/format followed by a comma and the base64 encoded image data, eg.  “data:image/gif,XYZ”, where XYZ is the base64 encoded image data.

To add a new image bundle to an existing graph, the following code is used

var bundle = new mxImageBundle(alt);
bundle.putImage('myImage', 'data:image/gif,R0lGODlhEAAQAMIGAAAAAICAAICAgP' +
  '//AOzp2O3r2////////yH+FUNyZWF0ZWQgd2l0aCBUaGUgR0lNUAAh+QQBCgAHACwAAAAA' +
  'EAAQAAADTXi63AowynnAMDfjPUDlnAAJhmeBFxAEloliKltWmiYCQvfVr6lBPB1ggxN1hi' +
  'laSSASFQpIV5HJBDyHpqK2ejVRm2AAgZCdmCGO9CIBADs=', fallback);
bundle.putImage('mySvgImage', 'data:image/svg+xml,' + encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">' +
  '<linearGradient id="gradient"><stop offset="10%" stop-color="#F00"/>' +
  '<stop offset="90%" stop-color="#fcc"/></linearGradient>' +
  '<rect fill="url(#gradient)" width="100%" height="100%"/></svg>'), fallback);
graph.addImageBundle(bundle);
(end);

Alt is an optional boolean (default is false) that specifies if the value
or the fallback should be returned in <getImage>.

The image can then be referenced in any cell style using image=myImage.
If you are using mxOutline, you should use the same image bundles in the
graph that renders the outline.

The keys for images are resolved in <mxGraph.postProcessCellStyle> and
turned into a data URI if the returned value has a short data URI format
as specified above.

A typical value for the fallback is a MTHML link as defined in RFC 2557.
Note that this format requires a file to be dynamically created on the
server-side, or the page that contains the graph to be modified to contain
the resources, this can be done by adding a comment that contains the
resource in the HEAD section of the page after the title tag.

This type of fallback mechanism should be used in IE6 and IE7. IE8 does
support data URIs, but the maximum size is limited to 32 KB, which means
all data URIs should be limited to 32 KB.
Summary
Variables
imagesMaps from keys to images.
altSpecifies if the fallback representation should be returned.
Functions
putImageAdds the specified entry to the map.
getImageReturns the value for the given key.

Variables

images

mxImageBundle.prototype.images

Maps from keys to images.

alt

Specifies if the fallback representation should be returned.

Functions

putImage

mxImageBundle.prototype.putImage = function(key,
value,
fallback)

Adds the specified entry to the map.  The entry is an object with a value and fallback property as specified in the arguments.

getImage

mxImageBundle.prototype.getImage = function(key)

Returns the value for the given key.  This returns the value or fallback, depending on alt.  The fallback is returned if alt is true, the value is returned otherwise.

mxImageExport

Creates a new image export instance to be used with an export canvas.  Here is an example that uses this class to create an image via a backend using <mxXmlExportCanvas>.

var xmlDoc = mxUtils.createXmlDocument();
var root = xmlDoc.createElement('output');
xmlDoc.appendChild(root);

var xmlCanvas = new mxXmlCanvas2D(root);
var imgExport = new mxImageExport();
imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);

var bounds = graph.getGraphBounds();
var w = Math.ceil(bounds.x + bounds.width);
var h = Math.ceil(bounds.y + bounds.height);

var xml = mxUtils.getXml(root);
new mxXmlRequest('export', 'format=png&w=' + w +
     '&h=' + h + '&bg=#F9F7ED&xml=' + encodeURIComponent(xml))
     .simulate(document, '_blank');
Summary
Functions
mxImageExportConstructs a new image export.
Variables
includeOverlaysSpecifies if overlays should be included in the export.
Functions
drawStateDraws the given state and all its descendants to the given canvas.
drawStateDraws the given state and all its descendants to the given canvas.
getLinkForCellStateReturns the link for the given cell state and canvas.
drawCellStateDraws the given state to the given canvas.
drawShapeDraws the shape of the given state.
drawTextDraws the text of the given state.
drawOverlaysDraws the overlays for the given state.

Functions

mxImageExport

function mxImageExport()

Constructs a new image export.

Variables

includeOverlays

mxImageExport.prototype.includeOverlays

Specifies if overlays should be included in the export.  Default is false.

Functions

drawState

mxImageExport.prototype.drawState = function(state,
canvas)

Draws the given state and all its descendants to the given canvas.

drawState

Draws the given state and all its descendants to the given canvas.

getLinkForCellState

mxImageExport.prototype.getLinkForCellState = function(state,
canvas)

Returns the link for the given cell state and canvas.  This returns null.

drawCellState

mxImageExport.prototype.drawCellState = function(state,
canvas)

Draws the given state to the given canvas.

drawShape

mxImageExport.prototype.drawShape = function(state,
canvas)

Draws the shape of the given state.

drawText

mxImageExport.prototype.drawText = function(state,
canvas)

Draws the text of the given state.

drawOverlays

mxImageExport.prototype.drawOverlays = function(state,
canvas)

Draws the overlays for the given state.  This is called if includeOverlays is true.

mxAbstractCanvas2D

Base class for all canvases.  A description of the public API is available in mxXmlCanvas2D.  All color values of mxConstants.NONE will be converted to null in the state.

Summary
Functions
mxAbstractCanvas2DConstructs a new abstract canvas.
Variables
converterHolds the mxUrlConverter to convert image URLs.
stateHolds the current state.
statesStack of states.
pathHolds the current path as an array.
rotateHtmlSwitch for rotation of HTML.
lastXHolds the last x coordinate.
lastYHolds the last y coordinate.
moveOpContains the string used for moving in paths.
lineOpContains the string used for moving in paths.
quadOpContains the string used for quadratic paths.
curveOpContains the string used for bezier curves.
closeOpHolds the operator for closing curves.
pointerEventsBoolean value that specifies if events should be handled.
Functions
createUrlConverterCreate a new mxUrlConverter and returns it.
resetResets the state of this canvas.
createStateCreates the state of the this canvas.
formatRounds all numbers to integers.
addOpAdds the given operation to the path.
rotatePointRotates the given point and returns the result as an mxPoint.
saveSaves the current state.
restoreRestores the current state.
setLinkSets the current link.
scaleScales the current state.
translateTranslates the current state.
rotateRotates the current state.
setAlphaSets the current alpha.
setFillAlphaSets the current solid fill alpha.
setStrokeAlphaSets the current stroke alpha.
setFillColorSets the current fill color.
setGradientSets the current gradient.
setStrokeColorSets the current stroke color.
setStrokeWidthSets the current stroke width.
setDashedEnables or disables dashed lines.
setDashPatternSets the current dash pattern.
setLineCapSets the current line cap.
setLineJoinSets the current line join.
setMiterLimitSets the current miter limit.
setFontColorSets the current font color.
setFontColorSets the current font color.
setFontColorSets the current font color.
setFontSizeSets the current font size.
setFontFamilySets the current font family.
setFontStyleSets the current font style.
setShadowEnables or disables and configures the current shadow.
setShadowColorEnables or disables and configures the current shadow.
setShadowAlphaEnables or disables and configures the current shadow.
setShadowOffsetEnables or disables and configures the current shadow.
beginStarts a new path.
moveToMoves the current path the given coordinates.
lineToDraws a line to the given coordinates.
quadToAdds a quadratic curve to the current path.
curveToAdds a bezier curve to the current path.
arcToAdds the given arc to the current path.
closeCloses the current path.
endEmpty implementation for backwards compatibility.

Functions

mxAbstractCanvas2D

function mxAbstractCanvas2D()

Constructs a new abstract canvas.

Variables

converter

this.converter

Holds the mxUrlConverter to convert image URLs.

state

mxAbstractCanvas2D.prototype.state

Holds the current state.

states

mxAbstractCanvas2D.prototype.states

Stack of states.

path

mxAbstractCanvas2D.prototype.path

Holds the current path as an array.

rotateHtml

mxAbstractCanvas2D.prototype.rotateHtml

Switch for rotation of HTML.  Default is false.

lastX

mxAbstractCanvas2D.prototype.lastX

Holds the last x coordinate.

lastY

mxAbstractCanvas2D.prototype.lastY

Holds the last y coordinate.

moveOp

mxAbstractCanvas2D.prototype.moveOp

Contains the string used for moving in paths.  Default is ‘M’.

lineOp

mxAbstractCanvas2D.prototype.lineOp

Contains the string used for moving in paths.  Default is ‘L’.

quadOp

mxAbstractCanvas2D.prototype.quadOp

Contains the string used for quadratic paths.  Default is ‘Q’.

curveOp

mxAbstractCanvas2D.prototype.curveOp

Contains the string used for bezier curves.  Default is ‘C’.

closeOp

mxAbstractCanvas2D.prototype.closeOp

Holds the operator for closing curves.  Default is ‘Z’.

pointerEvents

mxAbstractCanvas2D.prototype.pointerEvents

Boolean value that specifies if events should be handled.  Default is false.

Functions

createUrlConverter

mxAbstractCanvas2D.prototype.createUrlConverter = function()

Create a new mxUrlConverter and returns it.

reset

mxAbstractCanvas2D.prototype.reset = function()

Resets the state of this canvas.

createState

mxAbstractCanvas2D.prototype.createState = function()

Creates the state of the this canvas.

format

mxAbstractCanvas2D.prototype.format = function(value)

Rounds all numbers to integers.

addOp

mxAbstractCanvas2D.prototype.addOp = function()

Adds the given operation to the path.

rotatePoint

mxAbstractCanvas2D.prototype.rotatePoint = function(x,
y,
theta,
cx,
cy)

Rotates the given point and returns the result as an mxPoint.

save

mxAbstractCanvas2D.prototype.save = function()

Saves the current state.

restore

mxAbstractCanvas2D.prototype.restore = function()

Restores the current state.

setLink

mxAbstractCanvas2D.prototype.setLink = function(link)

Sets the current link.  Hook for subclassers.

scale

mxAbstractCanvas2D.prototype.scale = function(value)

Scales the current state.

translate

mxAbstractCanvas2D.prototype.translate = function(dx,
dy)

Translates the current state.

rotate

mxAbstractCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)

Rotates the current state.

setAlpha

mxAbstractCanvas2D.prototype.setAlpha = function(value)

Sets the current alpha.

setFillAlpha

mxAbstractCanvas2D.prototype.setFillAlpha = function(value)

Sets the current solid fill alpha.

setStrokeAlpha

mxAbstractCanvas2D.prototype.setStrokeAlpha = function(value)

Sets the current stroke alpha.

setFillColor

mxAbstractCanvas2D.prototype.setFillColor = function(value)

Sets the current fill color.

setGradient

mxAbstractCanvas2D.prototype.setGradient = function(color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2)

Sets the current gradient.

setStrokeColor

mxAbstractCanvas2D.prototype.setStrokeColor = function(value)

Sets the current stroke color.

setStrokeWidth

mxAbstractCanvas2D.prototype.setStrokeWidth = function(value)

Sets the current stroke width.

setDashed

mxAbstractCanvas2D.prototype.setDashed = function(value,
fixDash)

Enables or disables dashed lines.

setDashPattern

mxAbstractCanvas2D.prototype.setDashPattern = function(value)

Sets the current dash pattern.

setLineCap

mxAbstractCanvas2D.prototype.setLineCap = function(value)

Sets the current line cap.

setLineJoin

mxAbstractCanvas2D.prototype.setLineJoin = function(value)

Sets the current line join.

setMiterLimit

mxAbstractCanvas2D.prototype.setMiterLimit = function(value)

Sets the current miter limit.

setFontColor

mxAbstractCanvas2D.prototype.setFontColor = function(value)

Sets the current font color.

setFontColor

Sets the current font color.

setFontColor

Sets the current font color.

setFontSize

mxAbstractCanvas2D.prototype.setFontSize = function(value)

Sets the current font size.

setFontFamily

mxAbstractCanvas2D.prototype.setFontFamily = function(value)

Sets the current font family.

setFontStyle

mxAbstractCanvas2D.prototype.setFontStyle = function(value)

Sets the current font style.

setShadow

mxAbstractCanvas2D.prototype.setShadow = function(enabled)

Enables or disables and configures the current shadow.

setShadowColor

mxAbstractCanvas2D.prototype.setShadowColor = function(value)

Enables or disables and configures the current shadow.

setShadowAlpha

mxAbstractCanvas2D.prototype.setShadowAlpha = function(value)

Enables or disables and configures the current shadow.

setShadowOffset

mxAbstractCanvas2D.prototype.setShadowOffset = function(dx,
dy)

Enables or disables and configures the current shadow.

begin

mxAbstractCanvas2D.prototype.begin = function()

Starts a new path.

moveTo

mxAbstractCanvas2D.prototype.moveTo = function(x,
y)

Moves the current path the given coordinates.

lineTo

mxAbstractCanvas2D.prototype.lineTo = function(x,
y)

Draws a line to the given coordinates.  Uses moveTo with the op argument.

quadTo

mxAbstractCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)

Adds a quadratic curve to the current path.

curveTo

mxAbstractCanvas2D.prototype.curveTo = function(x1,
y1,
x2,
y2,
x3,
y3)

Adds a bezier curve to the current path.

arcTo

mxAbstractCanvas2D.prototype.arcTo = function(rx,
ry,
angle,
largeArcFlag,
sweepFlag,
x,
y)

Adds the given arc to the current path.  This is a synthetic operation that is broken down into curves.

close

mxAbstractCanvas2D.prototype.close = function(x1,
y1,
x2,
y2,
x3,
y3)

Closes the current path.

end

mxAbstractCanvas2D.prototype.end = function()

Empty implementation for backwards compatibility.  This will be removed.

mxXmlCanvas2D

Base class for all canvases.  The following methods make up the public interface of the canvas 2D for all painting in mxGraph:

mxAbstractCanvas2D.arcTo is an additional method for drawing paths.  This is a synthetic method, meaning that it is turned into a sequence of curves by default.  Subclassers may add native support for arcs.

Summary
Functions
mxXmlCanvas2DConstructs a new abstract canvas.
Variables
rootReference to the container for the SVG content.
textEnabledSpecifies if text output should be enabled.
compressedSpecifies if the output should be compressed by removing redundant calls.
Functions
writeDefaults
formatReturns a formatted number with 2 decimal places.
createElementCreates the given element using the owner document of root.
saveSaves the drawing state.
restoreRestores the drawing state.
scaleScales the output.
translateTranslates the output.
rotateRotates and/or flips the output around a given center.
setAlphaSets the current alpha.
setFillAlphaSets the current fill alpha.
setStrokeAlphaSets the current stroke alpha.
setFillColorSets the current fill color.
setGradientSets the gradient.
setStrokeColorSets the current stroke color.
setStrokeWidthSets the current stroke width.
setDashedEnables or disables dashed lines.
setDashPatternSets the current dash pattern.
setLineCapSets the line cap.
setLineJoinSets the line join.
setMiterLimitSets the miter limit.
setFontColorSets the current font color.
setFontBackgroundColorSets the current font background color.
setFontBorderColorSets the current font border color.
setFontSizeSets the current font size.
setFontFamilySets the current font family.
setFontStyleSets the current font style.
setShadowEnables or disables shadows.
setShadowColorSets the current shadow color.
setShadowAlphaSets the current shadows alpha.
setShadowOffsetSets the current shadow offset.
rectPuts a rectangle into the drawing buffer.
roundrectPuts a rounded rectangle into the drawing buffer.
ellipsePuts an ellipse into the drawing buffer.
imagePaints an image.
beginStarts a new path and puts it into the drawing buffer.
moveToMoves the current path the given point.
lineToDraws a line to the given coordinates.
quadToAdds a quadratic curve to the current path.
curveToAdds a bezier curve to the current path.
closeCloses the current path.
textPaints the given text.
strokePaints the outline of the current drawing buffer.
fillFills the current drawing buffer.
fillAndStrokeFills the current drawing buffer and its outline.

Functions

mxXmlCanvas2D

function mxXmlCanvas2D(root)

Constructs a new abstract canvas.

Variables

root

this.root

Reference to the container for the SVG content.

textEnabled

mxXmlCanvas2D.prototype.textEnabled

Specifies if text output should be enabled.  Default is true.

compressed

mxXmlCanvas2D.prototype.compressed

Specifies if the output should be compressed by removing redundant calls.  Default is true.

Functions

writeDefaults

mxXmlCanvas2D.prototype.writeDefaults = function()

Writes the rendering defaults to root

format

mxXmlCanvas2D.prototype.format = function(value)

Returns a formatted number with 2 decimal places.

createElement

mxXmlCanvas2D.prototype.createElement = function(name)

Creates the given element using the owner document of root.

save

mxXmlCanvas2D.prototype.save = function()

Saves the drawing state.

restore

mxXmlCanvas2D.prototype.restore = function()

Restores the drawing state.

scale

mxXmlCanvas2D.prototype.scale = function(value)

Scales the output.

Parameters

scaleNumber that represents the scale where 1 is equal to 100%.

translate

mxXmlCanvas2D.prototype.translate = function(dx,
dy)

Translates the output.

Parameters

dxNumber that specifies the horizontal translation.
dyNumber that specifies the vertical translation.

rotate

mxXmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)

Rotates and/or flips the output around a given center.  (Note: Due to limitations in VML, the rotation cannot be concatenated.)

Parameters

thetaNumber that represents the angle of the rotation (in degrees).
flipHBoolean indicating if the output should be flipped horizontally.
flipVBoolean indicating if the output should be flipped vertically.
cxNumber that represents the x-coordinate of the rotation center.
cyNumber that represents the y-coordinate of the rotation center.

setAlpha

mxXmlCanvas2D.prototype.setAlpha = function(value)

Sets the current alpha.

Parameters

valueNumber that represents the new alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setFillAlpha

mxXmlCanvas2D.prototype.setFillAlpha = function(value)

Sets the current fill alpha.

Parameters

valueNumber that represents the new fill alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setStrokeAlpha

mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)

Sets the current stroke alpha.

Parameters

valueNumber that represents the new stroke alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setFillColor

mxXmlCanvas2D.prototype.setFillColor = function(value)

Sets the current fill color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setGradient

mxXmlCanvas2D.prototype.setGradient = function(color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2)

Sets the gradient.  Note that the coordinates may be ignored by some implementations.

Parameters

color1Hexadecimal representation of the start color.
color2Hexadecimal representation of the end color.
xX-coordinate of the gradient region.
yy-coordinate of the gradient region.
wWidth of the gradient region.
hHeight of the gradient region.
directionOne of mxConstants.DIRECTION_NORTH, mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH or mxConstants.DIRECTION_WEST.
alpha1Optional alpha of the start color.  Default is 1.  Possible values are between 1 (opaque) and 0 (transparent).
alpha2Optional alpha of the end color.  Default is 1.  Possible values are between 1 (opaque) and 0 (transparent).

setStrokeColor

mxXmlCanvas2D.prototype.setStrokeColor = function(value)

Sets the current stroke color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setStrokeWidth

mxXmlCanvas2D.prototype.setStrokeWidth = function(value)

Sets the current stroke width.

Parameters

valueNumeric representation of the stroke width.

setDashed

mxXmlCanvas2D.prototype.setDashed = function(value,
fixDash)

Enables or disables dashed lines.

Parameters

valueBoolean that specifies if dashed lines should be enabled.
valueBoolean that specifies if the stroke width should be ignored for the dash pattern.  Default is false.

setDashPattern

mxXmlCanvas2D.prototype.setDashPattern = function(value)

Sets the current dash pattern.  Default is ‘3 3’.

Parameters

valueString that represents the dash pattern, which is a sequence of numbers defining the length of the dashes and the length of the spaces
between the dashes.  The lengths are relative to the line widtha length of 1 is equals to the line width.

setLineCap

mxXmlCanvas2D.prototype.setLineCap = function(value)

Sets the line cap.  Default is ‘flat’ which corresponds to ‘butt’ in SVG.

Parameters

valueString that represents the line cap.  Possible values are flat, round and square.

setLineJoin

mxXmlCanvas2D.prototype.setLineJoin = function(value)

Sets the line join.  Default is ‘miter’.

Parameters

valueString that represents the line join.  Possible values are miter, round and bevel.

setMiterLimit

mxXmlCanvas2D.prototype.setMiterLimit = function(value)

Sets the miter limit.  Default is 10.

Parameters

valueNumber that represents the miter limit.

setFontColor

mxXmlCanvas2D.prototype.setFontColor = function(value)

Sets the current font color.  Default is ‘#000000’.

Parameters

valueHexadecimal representation of the color or ‘none’.

setFontBackgroundColor

mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)

Sets the current font background color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setFontBorderColor

mxXmlCanvas2D.prototype.setFontBorderColor = function(value)

Sets the current font border color.

Parameters

valueHexadecimal representation of the color or ‘none’.

setFontSize

mxXmlCanvas2D.prototype.setFontSize = function(value)

Sets the current font size.  Default is mxConstants.DEFAULT_FONTSIZE.

Parameters

valueNumeric representation of the font size.

setFontFamily

mxXmlCanvas2D.prototype.setFontFamily = function(value)

Sets the current font family.  Default is mxConstants.DEFAULT_FONTFAMILY.

Parameters

valueString representation of the font family.  This handles the same values as the CSS font-family property.

setFontStyle

mxXmlCanvas2D.prototype.setFontStyle = function(value)

Sets the current font style.

Parameters

valueNumeric representation of the font family.  This is the sum of the font styles from mxConstants.

setShadow

mxXmlCanvas2D.prototype.setShadow = function(value)

Enables or disables shadows.

Parameters

valueBoolean that specifies if shadows should be enabled.

setShadowColor

mxXmlCanvas2D.prototype.setShadowColor = function(value)

Sets the current shadow color.  Default is mxConstants.SHADOWCOLOR.

Parameters

valueHexadecimal representation of the color or ‘none’.

setShadowAlpha

mxXmlCanvas2D.prototype.setShadowAlpha = function(value)

Sets the current shadows alpha.  Default is mxConstants.SHADOW_OPACITY.

Parameters

valueNumber that represents the new alpha.  Possible values are between 1 (opaque) and 0 (transparent).

setShadowOffset

mxXmlCanvas2D.prototype.setShadowOffset = function(dx,
dy)

Sets the current shadow offset.

Parameters

dxNumber that represents the horizontal offset of the shadow.
dyNumber that represents the vertical offset of the shadow.

rect

mxXmlCanvas2D.prototype.rect = function(x,
y,
w,
h)

Puts a rectangle into the drawing buffer.

Parameters

xNumber that represents the x-coordinate of the rectangle.
yNumber that represents the y-coordinate of the rectangle.
wNumber that represents the width of the rectangle.
hNumber that represents the height of the rectangle.

roundrect

mxXmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)

Puts a rounded rectangle into the drawing buffer.

Parameters

xNumber that represents the x-coordinate of the rectangle.
yNumber that represents the y-coordinate of the rectangle.
wNumber that represents the width of the rectangle.
hNumber that represents the height of the rectangle.
dxNumber that represents the horizontal rounding.
dyNumber that represents the vertical rounding.

ellipse

mxXmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)

Puts an ellipse into the drawing buffer.

Parameters

xNumber that represents the x-coordinate of the ellipse.
yNumber that represents the y-coordinate of the ellipse.
wNumber that represents the width of the ellipse.
hNumber that represents the height of the ellipse.

image

mxXmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)

Paints an image.

Parameters

xNumber that represents the x-coordinate of the image.
yNumber that represents the y-coordinate of the image.
wNumber that represents the width of the image.
hNumber that represents the height of the image.
srcString that specifies the URL of the image.
aspectBoolean indicating if the aspect of the image should be preserved.
flipHBoolean indicating if the image should be flipped horizontally.
flipVBoolean indicating if the image should be flipped vertically.

begin

mxXmlCanvas2D.prototype.begin = function()

Starts a new path and puts it into the drawing buffer.

moveTo

mxXmlCanvas2D.prototype.moveTo = function(x,
y)

Moves the current path the given point.

Parameters

xNumber that represents the x-coordinate of the point.
yNumber that represents the y-coordinate of the point.

lineTo

mxXmlCanvas2D.prototype.lineTo = function(x,
y)

Draws a line to the given coordinates.

Parameters

xNumber that represents the x-coordinate of the endpoint.
yNumber that represents the y-coordinate of the endpoint.

quadTo

mxXmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)

Adds a quadratic curve to the current path.

Parameters

x1Number that represents the x-coordinate of the control point.
y1Number that represents the y-coordinate of the control point.
x2Number that represents the x-coordinate of the endpoint.
y2Number that represents the y-coordinate of the endpoint.

curveTo

mxXmlCanvas2D.prototype.curveTo = function(x1,
y1,
x2,
y2,
x3,
y3)

Adds a bezier curve to the current path.

Parameters

x1Number that represents the x-coordinate of the first control point.
y1Number that represents the y-coordinate of the first control point.
x2Number that represents the x-coordinate of the second control point.
y2Number that represents the y-coordinate of the second control point.
x3Number that represents the x-coordinate of the endpoint.
y3Number that represents the y-coordinate of the endpoint.

close

mxXmlCanvas2D.prototype.close = function()

Closes the current path.

text

mxXmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)

Paints the given text.  Possible values for format are empty string for plain text and html for HTML markup.  Background and border color as well as clipping is not available in plain text labels for VML.  HTML labels are not available as part of shapes with no foreignObject support in SVG (eg.  IE9, IE10).

Parameters

xNumber that represents the x-coordinate of the text.
yNumber that represents the y-coordinate of the text.
wNumber that represents the available width for the text or 0 for automatic width.
hNumber that represents the available height for the text or 0 for automatic height.
strString that specifies the text to be painted.
alignString that represents the horizontal alignment.
valignString that represents the vertical alignment.
wrapBoolean that specifies if word-wrapping is enabled.  Requires w > 0.
formatEmpty string for plain text or ‘html’ for HTML markup.
overflowSpecifies the overflow behaviour of the label.  Requires w > 0 and/or h > 0.
clipBoolean that specifies if the label should be clipped.  Requires w > 0 and/or h > 0.
rotationNumber that specifies the angle of the rotation around the anchor point of the text.
dirOptional string that specifies the text direction.  Possible values are rtl and lrt.

stroke

mxXmlCanvas2D.prototype.stroke = function()

Paints the outline of the current drawing buffer.

fill

mxXmlCanvas2D.prototype.fill = function()

Fills the current drawing buffer.

fillAndStroke

mxXmlCanvas2D.prototype.fillAndStroke = function()

Fills the current drawing buffer and its outline.

mxSvgCanvas2D

Extends mxAbstractCanvas2D to implement a canvas for SVG.  This canvas writes all calls as SVG output to the given SVG root node.

var svgDoc = mxUtils.createXmlDocument();
var root = (svgDoc.createElementNS != null) ?
     svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');

if (svgDoc.createElementNS == null)
{
  root.setAttribute('xmlns', mxConstants.NS_SVG);
  root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
}
else
{
  root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
}

var bounds = graph.getGraphBounds();
root.setAttribute('width', (bounds.x + bounds.width + 4) + 'px');
root.setAttribute('height', (bounds.y + bounds.height + 4) + 'px');
root.setAttribute('version', '1.1');

svgDoc.appendChild(root);

var svgCanvas = new mxSvgCanvas2D(root);

A description of the public API is available in mxXmlCanvas2D.

To disable anti-aliasing in the output, use the following code.

graph.view.canvas.ownerSVGElement.setAttribute('shape-rendering', 'crispEdges');

Or set the respective attribute in the SVG element directly.

Summary
Functions
mxSvgCanvas2DConstructs a new SVG canvas.
Variables
rootReference to the container for the SVG content.
gradientsLocal cache of gradients for quick lookups.
defsReference to the defs section of the SVG document.
styleEnabledStores the value of styleEnabled passed to the constructor.
pathHolds the current DOM node.
matchHtmlAlignmentSpecifies if plain text output should match the vertical HTML alignment.
textEnabledSpecifies if text output should be enabled.
foEnabledSpecifies if use of foreignObject for HTML markup is allowed.
foAltTextSpecifies the fallback text for unsupported foreignObjects in exported documents.
foOffsetOffset to be used for foreignObjects.
textOffsetOffset to be used for text elements.
imageOffsetOffset to be used for image elements.
strokeToleranceAdds transparent paths for strokes.
minStrokeWidthMinimum stroke width for output.
refCountLocal counter for references in SVG export.
blockImagePointerEventsSpecifies if a transparent rectangle should be added on top of images to absorb all pointer events.
lineHeightCorrectionCorrection factor for mxConstants.LINE_HEIGHT in HTML output.
pointerEventsValueDefault value for active pointer events.
fontMetricsPaddingPadding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
cacheOffsetSizeSpecifies if offsetWidth and offsetHeight should be cached.
Functions
formatRounds all numbers to 2 decimal points.
getBaseUrlReturns the URL of the page without the hash part.
resetReturns any offsets for rendering pixels.
createStyleCreates the optional style section.
createElementPrivate helper function to create SVG elements
getAlternateContentReturns the alternate content for the given foreignObject.
createGradientIdPrivate helper function to create SVG elements
getSvgGradientPrivate helper function to create SVG elements
createSvgGradientCreates the given SVG gradient.
addNodePrivate helper function to create SVG elements
updateFillTransfers the stroke attributes from <state> to <node>.
getCurrentStrokeWidthReturns the current stroke width (>= 1), ie.
updateStrokeTransfers the stroke attributes from <state> to <node>.
updateStrokeAttributesTransfers the stroke attributes from <state> to <node>.
createDashPatternCreates the SVG dash pattern for the given state.
createToleranceCreates a hit detection tolerance shape for the given node.
createShadowCreates a shadow for the given node.
setLinkExperimental implementation for hyperlinks.
rotateSets the rotation of the canvas.
beginExtends superclass to create path.
rectPrivate helper function to create SVG elements
roundrectPrivate helper function to create SVG elements
ellipsePrivate helper function to create SVG elements
imagePrivate helper function to create SVG elements
convertHtmlConverts the given HTML string to XHTML.
createDivPrivate helper function to create SVG elements
textPaints the given text.
createClipCreates a clip for the given coordinates.
textPaints the given text.
updateFontUpdates the text properties for the given node.
addTextBackgroundBackground color and border
strokePaints the outline of the current path.
fillFills the current path.
fillAndStrokeFills and paints the outline of the current path.

Functions

mxSvgCanvas2D

function mxSvgCanvas2D(root,
styleEnabled)

Constructs a new SVG canvas.

Parameters

rootSVG container for the output.
styleEnabledOptional boolean that specifies if a style section should be added.  The style section sets the default font-size, font-family and stroke-miterlimit globally.  Default is false.

Variables

root

this.root

Reference to the container for the SVG content.

gradients

this.gradients

Local cache of gradients for quick lookups.

defs

this.defs

Reference to the defs section of the SVG document.  Only for export.

styleEnabled

this.styleEnabled

Stores the value of styleEnabled passed to the constructor.

path

Holds the current DOM node.

matchHtmlAlignment

mxSvgCanvas2D.prototype.matchHtmlAlignment

Specifies if plain text output should match the vertical HTML alignment.  Defaul is true.

textEnabled

mxSvgCanvas2D.prototype.textEnabled

Specifies if text output should be enabled.  Default is true.

foEnabled

mxSvgCanvas2D.prototype.foEnabled

Specifies if use of foreignObject for HTML markup is allowed.  Default is true.

foAltText

mxSvgCanvas2D.prototype.foAltText

Specifies the fallback text for unsupported foreignObjects in exported documents.  Default is ‘[Object]’.  If this is set to null then no fallback text is added to the exported document.

foOffset

mxSvgCanvas2D.prototype.foOffset

Offset to be used for foreignObjects.

textOffset

mxSvgCanvas2D.prototype.textOffset

Offset to be used for text elements.

imageOffset

mxSvgCanvas2D.prototype.imageOffset

Offset to be used for image elements.

strokeTolerance

mxSvgCanvas2D.prototype.strokeTolerance

Adds transparent paths for strokes.

minStrokeWidth

mxSvgCanvas2D.prototype.minStrokeWidth

Minimum stroke width for output.

refCount

mxSvgCanvas2D.prototype.refCount

Local counter for references in SVG export.

blockImagePointerEvents

mxSvgCanvas2D.prototype.blockImagePointerEvents

Specifies if a transparent rectangle should be added on top of images to absorb all pointer events.  Default is false.  This is only needed in Firefox to disable control-clicks on images.

lineHeightCorrection

mxSvgCanvas2D.prototype.lineHeightCorrection

Correction factor for mxConstants.LINE_HEIGHT in HTML output.  Default is 1.

pointerEventsValue

mxSvgCanvas2D.prototype.pointerEventsValue

Default value for active pointer events.  Default is all.

fontMetricsPadding

mxSvgCanvas2D.prototype.fontMetricsPadding

Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.  Default is 10.

cacheOffsetSize

mxSvgCanvas2D.prototype.cacheOffsetSize

Specifies if offsetWidth and offsetHeight should be cached.  Default is true.  This is used to speed up repaint of text in <updateText>.

Functions

format

mxSvgCanvas2D.prototype.format = function(value)

Rounds all numbers to 2 decimal points.

getBaseUrl

mxSvgCanvas2D.prototype.getBaseUrl = function()

Returns the URL of the page without the hash part.  This needs to use href to include any search part with no params (ie question mark alone).  This is a workaround for the fact that window.location.search is empty if there is no search string behind the question mark.

reset

mxSvgCanvas2D.prototype.reset = function()

Returns any offsets for rendering pixels.

createStyle

mxSvgCanvas2D.prototype.createStyle = function(x)

Creates the optional style section.

createElement

mxSvgCanvas2D.prototype.createElement = function(tagName,
namespace)

Private helper function to create SVG elements

getAlternateContent

Returns the alternate content for the given foreignObject.

createGradientId

mxSvgCanvas2D.prototype.createGradientId = function(start,
end,
alpha1,
alpha2,
direction)

Private helper function to create SVG elements

getSvgGradient

mxSvgCanvas2D.prototype.getSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)

Private helper function to create SVG elements

createSvgGradient

mxSvgCanvas2D.prototype.createSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)

Creates the given SVG gradient.

addNode

mxSvgCanvas2D.prototype.addNode = function(filled,
stroked)

Private helper function to create SVG elements

updateFill

mxSvgCanvas2D.prototype.updateFill = function()

Transfers the stroke attributes from <state> to <node>.

getCurrentStrokeWidth

mxSvgCanvas2D.prototype.getCurrentStrokeWidth = function()

Returns the current stroke width (>= 1), ie. max(1, this.format(this.state.strokeWidth * this.state.scale)).

updateStroke

mxSvgCanvas2D.prototype.updateStroke = function()

Transfers the stroke attributes from <state> to <node>.

updateStrokeAttributes

mxSvgCanvas2D.prototype.updateStrokeAttributes = function()

Transfers the stroke attributes from <state> to <node>.

createDashPattern

mxSvgCanvas2D.prototype.createDashPattern = function(scale)

Creates the SVG dash pattern for the given state.

createTolerance

mxSvgCanvas2D.prototype.createTolerance = function(node)

Creates a hit detection tolerance shape for the given node.

createShadow

mxSvgCanvas2D.prototype.createShadow = function(node)

Creates a shadow for the given node.

setLink

mxSvgCanvas2D.prototype.setLink = function(link)

Experimental implementation for hyperlinks.

rotate

mxSvgCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)

Sets the rotation of the canvas.  Note that rotation cannot be concatenated.

begin

mxSvgCanvas2D.prototype.begin = function()

Extends superclass to create path.

rect

mxSvgCanvas2D.prototype.rect = function(x,
y,
w,
h)

Private helper function to create SVG elements

roundrect

mxSvgCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)

Private helper function to create SVG elements

ellipse

mxSvgCanvas2D.prototype.ellipse = function(x,
y,
w,
h)

Private helper function to create SVG elements

image

mxSvgCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)

Private helper function to create SVG elements

convertHtml

mxSvgCanvas2D.prototype.convertHtml = function(val)

Converts the given HTML string to XHTML.

createDiv

mxSvgCanvas2D.prototype.createDiv = function(str,
align,
valign,
style,
overflow,
whiteSpace)

Private helper function to create SVG elements

text

mxSvgCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)

Paints the given text.  Possible values for format are empty string for plain text and html for HTML markup.  Note that HTML markup is only supported if foreignObject is supported and foEnabled is true.  (This means IE9 and later does currently not support HTML text as part of shapes.)

createClip

mxSvgCanvas2D.prototype.createClip = function(x,
y,
w,
h)

Creates a clip for the given coordinates.

text

Paints the given text.  Possible values for format are empty string for plain text and html for HTML markup.

updateFont

mxSvgCanvas2D.prototype.updateFont = function(node)

Updates the text properties for the given node.  (NOTE: For this to work in IE, the given node must be a text or tspan element.)

addTextBackground

mxSvgCanvas2D.prototype.addTextBackground = function(node,
str,
x,
y,
w,
h,
align,
valign,
overflow)

Background color and border

stroke

mxSvgCanvas2D.prototype.stroke = function()

Paints the outline of the current path.

fill

mxSvgCanvas2D.prototype.fill = function()

Fills the current path.

fillAndStroke

mxSvgCanvas2D.prototype.fillAndStroke = function()

Fills and paints the outline of the current path.

mxVmlCanvas2D

Implements a canvas to be used for rendering VML.  Here is an example of implementing a fallback for SVG images which are not supported in VML-based browsers.

var mxVmlCanvas2DImage = mxVmlCanvas2D.prototype.image;
mxVmlCanvas2D.prototype.image = function(x, y, w, h, src, aspect, flipH, flipV)
{
  if (src.substring(src.length - 4, src.length) == '.svg')
  {
    src = 'http://www.jgraph.com/images/mxgraph.gif';
  }

  mxVmlCanvas2DImage.apply(this, arguments);
};

To disable anti-aliasing in the output, use the following code.

document.createStyleSheet().cssText = mxClient.VML_PREFIX + '\\:*{antialias:false;)}';

A description of the public API is available in mxXmlCanvas2D.  Note that there is a known issue in VML where gradients are painted using the outer bounding box of rotated shapes, not the actual bounds of the shape.  See also text for plain text label restrictions in shapes for VML.

Summary
Variables
rootReference to the container for the SVG content.
pathHolds the current DOM node.
textEnabledSpecifies if text output should be enabledetB.
moveOpContains the string used for moving in paths.
lineOpContains the string used for moving in paths.
curveOpContains the string used for bezier curves.
closeOpHolds the operator for closing curves.
rotatedHtmlBackgroundBackground color for rotated HTML.
vmlScaleSpecifies the scale used to draw VML shapes.
Functions
createElementCreates the given element using the document.
createVmlElementCreates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.
addNodeAdds the current node to the root.
createTransparentFillCreates a transparent fill.
createFillCreates a fill for the current state.
createStrokeCreates a fill for the current state.
getVmlDashPatternReturns a VML dash pattern for the current dashPattern.
createShadowCreates a shadow for the given node.
createShadowFillCreates the fill for the shadow.
createShadowStrokeCreates the stroke for the shadow.
rotateSets the rotation of the canvas.
beginExtends superclass to create path.
quadToReplaces quadratic curve with bezier curve in VML.
createRectSets the glass gradient.
rectSets the current path to a rectangle.
roundrectSets the current path to a rounded rectangle.
ellipseSets the current path to an ellipse.
imagePaints an image.
createTextCreates the innermost element that contains the HTML text.
textPaints the given text.
plainTextPaints the outline of the current path.
strokePaints the outline of the current path.
fillFills the current path.
fillAndStrokeFills and paints the outline of the current path.

Variables

root

this.root

Reference to the container for the SVG content.

path

Holds the current DOM node.

textEnabled

mxVmlCanvas2D.prototype.textEnabled

Specifies if text output should be enabledetB.  Default is true.

moveOp

mxVmlCanvas2D.prototype.moveOp

Contains the string used for moving in paths.  Default is ‘m’.

lineOp

mxVmlCanvas2D.prototype.lineOp

Contains the string used for moving in paths.  Default is ‘l’.

curveOp

mxVmlCanvas2D.prototype.curveOp

Contains the string used for bezier curves.  Default is ‘c’.

closeOp

mxVmlCanvas2D.prototype.closeOp

Holds the operator for closing curves.  Default is ‘x e’.

rotatedHtmlBackground

mxVmlCanvas2D.prototype.rotatedHtmlBackground

Background color for rotated HTML.  Default is ‘’.  This can be set to eg. white to improve rendering of rotated text in VML for IE9.

vmlScale

mxVmlCanvas2D.prototype.vmlScale

Specifies the scale used to draw VML shapes.

Functions

createElement

mxVmlCanvas2D.prototype.createElement = function(name)

Creates the given element using the document.

createVmlElement

mxVmlCanvas2D.prototype.createVmlElement = function(name)

Creates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.

addNode

mxVmlCanvas2D.prototype.addNode = function(filled,
stroked)

Adds the current node to the root.

createTransparentFill

mxVmlCanvas2D.prototype.createTransparentFill = function()

Creates a transparent fill.

createFill

mxVmlCanvas2D.prototype.createFill = function()

Creates a fill for the current state.

createStroke

mxVmlCanvas2D.prototype.createStroke = function()

Creates a fill for the current state.

getVmlDashPattern

Returns a VML dash pattern for the current dashPattern.  See http://msdn.microsoft.com/en-us/library/bb264085(v=vs.85).aspx

createShadow

mxVmlCanvas2D.prototype.createShadow = function(node,
filled,
stroked)

Creates a shadow for the given node.

createShadowFill

mxVmlCanvas2D.prototype.createShadowFill = function()

Creates the fill for the shadow.

createShadowStroke

mxVmlCanvas2D.prototype.createShadowStroke = function()

Creates the stroke for the shadow.

rotate

mxVmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)

Sets the rotation of the canvas.  Note that rotation cannot be concatenated.

begin

mxVmlCanvas2D.prototype.begin = function()

Extends superclass to create path.

quadTo

mxVmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)

Replaces quadratic curve with bezier curve in VML.

createRect

mxVmlCanvas2D.prototype.createRect = function(nodeName,
x,
y,
w,
h)

Sets the glass gradient.

rect

mxVmlCanvas2D.prototype.rect = function(x,
y,
w,
h)

Sets the current path to a rectangle.

roundrect

mxVmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)

Sets the current path to a rounded rectangle.

ellipse

mxVmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)

Sets the current path to an ellipse.

image

mxVmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)

Paints an image.

createText

Creates the innermost element that contains the HTML text.

text

mxVmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)

Paints the given text.  Possible values for format are empty string for plain text and html for HTML markup.  Clipping, text background and border are not supported for plain text in VML.

plainText

mxVmlCanvas2D.prototype.plainText = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)

Paints the outline of the current path.

stroke

mxVmlCanvas2D.prototype.stroke = function()

Paints the outline of the current path.

fill

mxVmlCanvas2D.prototype.fill = function()

Fills the current path.

fillAndStroke

mxVmlCanvas2D.prototype.fillAndStroke = function()

Fills and paints the outline of the current path.

mxGuide

Implements the alignment of selection cells to other cells in the graph.

Summary
Functions
mxGuideConstructs a new guide object.
Variables
graphReference to the enclosing mxGraph instance.
statesContains the mxCellStates that are used for alignment.
horizontalSpecifies if horizontal guides are enabled.
verticalSpecifies if vertical guides are enabled.
verticalHolds the mxShape for the horizontal guide.
verticalHolds the mxShape for the vertical guide.
roundedSpecifies if rounded coordinates should be used.
Functions
setStatesSets the mxCellStates that should be used for alignment.
isEnabledForEventReturns true if the guide should be enabled for the given native event.
getGuideToleranceReturns the tolerance for the guides.
createGuideShapeReturns the mxShape to be used for painting the respective guide.
moveMoves the <bounds> by the given mxPoint and returnt the snapped point.
hideHides all current guides.
hideHides all current guides.
hideHides all current guides.
setVisibleShows or hides the current guides.
destroyDestroys all resources that this object uses.

Functions

mxGuide

function mxGuide(graph,
states)

Constructs a new guide object.

Variables

graph

mxGuide.prototype.graph

Reference to the enclosing mxGraph instance.

states

mxGuide.prototype.states

Contains the mxCellStates that are used for alignment.

horizontal

mxGuide.prototype.horizontal

Specifies if horizontal guides are enabled.  Default is true.

vertical

mxGuide.prototype.vertical

Specifies if vertical guides are enabled.  Default is true.

vertical

Holds the mxShape for the horizontal guide.

vertical

Holds the mxShape for the vertical guide.

rounded

mxGuide.prototype.rounded

Specifies if rounded coordinates should be used.  Default is false.

Functions

setStates

mxGuide.prototype.setStates = function(states)

Sets the mxCellStates that should be used for alignment.

isEnabledForEvent

mxGuide.prototype.isEnabledForEvent = function(evt)

Returns true if the guide should be enabled for the given native event.  This implementation always returns true.

getGuideTolerance

mxGuide.prototype.getGuideTolerance = function()

Returns the tolerance for the guides.  Default value is gridSize / 2.

createGuideShape

mxGuide.prototype.createGuideShape = function(horizontal)

Returns the mxShape to be used for painting the respective guide.  This implementation returns a new, dashed and crisp mxPolyline using mxConstants.GUIDE_COLOR and mxConstants.GUIDE_STROKEWIDTH as the format.

Parameters

horizontalBoolean that specifies which guide should be created.

move

mxGuide.prototype.move = function(bounds,
delta,
gridEnabled,
clone)

Moves the <bounds> by the given mxPoint and returnt the snapped point.

hide

Hides all current guides.

hide

Hides all current guides.

hide

mxGuide.prototype.hide = function()

Hides all current guides.

setVisible

mxGuide.prototype.setVisible = function(visible)

Shows or hides the current guides.

destroy

mxGuide.prototype.destroy = function()

Destroys all resources that this object uses.

mxShape

Base class for all shapes.  A shape in mxGraph is a separate implementation for SVG, VML and HTML.  Which implementation to use is controlled by the dialect property which is assigned from within the mxCellRenderer when the shape is created.  The dialect must be assigned for a shape, and it does normally depend on the browser and the confiuration of the graph (see mxGraph rendering hint).

For each supported shape in SVG and VML, a corresponding shape exists in mxGraph, namely for text, image, rectangle, rhombus, ellipse and polyline.  The other shapes are a combination of these shapes (eg. label and swimlane) or they consist of one or more (filled) path objects (eg. actor and cylinder).  The HTML implementation is optional but may be required for a HTML-only view of the graph.

Custom Shapes

To extend from this class, the basic code looks as follows.  In the special case where the custom shape consists only of one filled region or one filled region and an additional stroke the mxActor and mxCylinder should be subclassed, respectively.

function CustomShape() { }

CustomShape.prototype = new mxShape();
CustomShape.prototype.constructor = CustomShape;

To register a custom shape in an existing graph instance, one must register the shape under a new name in the graph’s cell renderer as follows:

mxCellRenderer.registerShape('customShape', CustomShape);

The second argument is the name of the constructor.

In order to use the shape you can refer to the given name above in a stylesheet.  For example, to change the shape for the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'customShape';
Summary
Functions
mxShapeConstructs a new shape.
Variables
dialectHolds the dialect in which the shape is to be painted.
scaleHolds the scale in which the shape is being painted.
antiAliasRendering hint for configuring the canvas.
minSvgStrokeWidthMinimum stroke width for SVG output.
boundsHolds the mxRectangle that specifies the bounds of this shape.
pointsHolds the array of mxPoints that specify the points of this shape.
nodeHolds the outermost DOM node that represents this shape.
stateOptional reference to the corresponding mxCellState.
styleOptional reference to the style of the corresponding mxCellState.
boundingBoxContains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
stencilHolds the mxStencil that defines the shape.
svgStrokeToleranceEvent-tolerance for SVG strokes (in px).
pointerEventsSpecifies if pointer events should be handled.
svgPointerEventsSpecifies if pointer events should be handled.
shapePointerEventsSpecifies if pointer events outside of shape should be handled.
stencilPointerEventsSpecifies if pointer events outside of stencils should be handled.
vmlScaleScale for improving the precision of VML rendering.
outlineSpecifies if the shape should be drawn as an outline.
visibleSpecifies if the shape is visible.
useSvgBoundingBoxAllows to use the SVG bounding box in SVG.
Functions
initInitializes the shape by creaing the DOM node using create and adding it into the given container.
initStylesSets the styles to their default values.
isParseVmlSpecifies if any VML should be added via insertAdjacentHtml to the DOM.
isHtmlAllowedReturns true if HTML is allowed for this shape.
getSvgScreenOffsetReturns 0, or 0.5 if <strokewidth> % 2 == 1.
createCreates and returns the DOM node(s) for the shape in the given container.
createSvgCreates and returns the SVG node(s) to represent this shape.
createVmlCreates and returns the VML node to represent this shape.
createHtmlCreates and returns the HTML DOM node(s) to represent this shape.
reconfigureReconfigures this shape.
redrawCreates and returns the SVG node(s) to represent this shape.
clearRemoves all child nodes and resets all CSS.
updateBoundsFromPointsUpdates the bounds based on the points.
getLabelBoundsReturns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
getLabelMarginsReturns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
checkBoundsReturns true if the bounds are not null and all of its variables are numeric.
createVmlGroupReturns the temporary element used for rendering in IE8 standards mode.
redrawShapeUpdates the SVG or VML shape.
createCanvasCreates a new canvas for drawing this shape.
createSvgCanvasCreates and returns an mxSvgCanvas2D for rendering this shape.
createVmlCanvasCreates and returns an mxVmlCanvas2D for rendering this shape.
updateVmlContainerUpdates the bounds of the VML container.
redrawHtmlAllow optimization by replacing VML with HTML.
updateHtmlFiltersAllow optimization by replacing VML with HTML.
mixedModeHtmlAllow optimization by replacing VML with HTML.
mixedModeHtmlAllow optimization by replacing VML with HTML.
destroyCanvasDestroys the given canvas which was used for drawing.
paintGeneric rendering code.
configureCanvasSets the state of the canvas for drawing the shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
updateTransformSets the scale and rotation on the given canvas.
paintVertexShapePaints the vertex shape.
paintBackgroundHook for subclassers.
paintForegroundHook for subclassers.
paintEdgeShapeHook for subclassers.
getArcSizeReturns the arc size for the given dimension.
paintGlassEffectPaints the glass gradient effect.
addPointsPaints the given points with rounded corners.
resetStylesResets all styles.
applyApplies the style of the given mxCellState to the shape.
setCursorSets the cursor on the given shape.
getCursorReturns the current cursor.
isRoundableHook for subclassers.
updateBoundingBoxUpdates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
createBoundingBoxReturns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
augmentBoundingBoxAugments the bounding box with the strokewidth and shadow offsets.
isPaintBoundsInvertedReturns true if the bounds should be inverted.
getRotationReturns the rotation from the style.
getTextRotationReturns the rotation for the text label.
getShapeRotationReturns the actual rotation of the shape.
createTransparentSvgRectangleAdds a transparent rectangle that catches all events.
setTransparentBackgroundImageSets a transparent background CSS style to catch all events.
releaseSvgGradientsPaints the line shape.
destroyDestroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.

Functions

mxShape

function mxShape(stencil)

Constructs a new shape.

Variables

dialect

mxShape.prototype.dialect

Holds the dialect in which the shape is to be painted.  This can be one of the DIALECT constants in mxConstants.

scale

mxShape.prototype.scale

Holds the scale in which the shape is being painted.

antiAlias

mxShape.prototype.antiAlias

Rendering hint for configuring the canvas.

minSvgStrokeWidth

mxShape.prototype.minSvgStrokeWidth

Minimum stroke width for SVG output.

bounds

mxShape.prototype.bounds

Holds the mxRectangle that specifies the bounds of this shape.

points

mxShape.prototype.points

Holds the array of mxPoints that specify the points of this shape.

node

mxShape.prototype.node

Holds the outermost DOM node that represents this shape.

state

mxShape.prototype.state

Optional reference to the corresponding mxCellState.

style

mxShape.prototype.style

Optional reference to the style of the corresponding mxCellState.

boundingBox

mxShape.prototype.boundingBox

Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.

stencil

mxShape.prototype.stencil

Holds the mxStencil that defines the shape.

svgStrokeTolerance

mxShape.prototype.svgStrokeTolerance

Event-tolerance for SVG strokes (in px).  Default is 8.  This is only passed to the canvas in createSvgCanvas if pointerEvents is true.

pointerEvents

mxShape.prototype.pointerEvents

Specifies if pointer events should be handled.  Default is true.

svgPointerEvents

mxShape.prototype.svgPointerEvents

Specifies if pointer events should be handled.  Default is true.

shapePointerEvents

mxShape.prototype.shapePointerEvents

Specifies if pointer events outside of shape should be handled.  Default is false.

stencilPointerEvents

mxShape.prototype.stencilPointerEvents

Specifies if pointer events outside of stencils should be handled.  Default is false.  Set this to true for backwards compatibility with the 1.x branch.

vmlScale

mxShape.prototype.vmlScale

Scale for improving the precision of VML rendering.  Default is 1.

outline

mxShape.prototype.outline

Specifies if the shape should be drawn as an outline.  This disables all fill colors and can be used to disable other drawing states that should not be painted for outlines.  Default is false.  This should be set before calling apply.

visible

mxShape.prototype.visible

Specifies if the shape is visible.  Default is true.

useSvgBoundingBox

mxShape.prototype.useSvgBoundingBox

Allows to use the SVG bounding box in SVG.  Default is false for performance reasons.

Functions

init

mxShape.prototype.init = function(container)

Initializes the shape by creaing the DOM node using create and adding it into the given container.

Parameters

containerDOM node that will contain the shape.

initStyles

mxShape.prototype.initStyles = function(container)

Sets the styles to their default values.

isParseVml

mxShape.prototype.isParseVml = function()

Specifies if any VML should be added via insertAdjacentHtml to the DOM.  This is only needed in IE8 and only if the shape contains VML markup.  This method returns true.

isHtmlAllowed

mxShape.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape.  This implementation always returns false.

getSvgScreenOffset

mxShape.prototype.getSvgScreenOffset = function()

Returns 0, or 0.5 if <strokewidth> % 2 == 1.

create

mxShape.prototype.create = function(container)

Creates and returns the DOM node(s) for the shape in the given container.  This implementation invokes createSvg, createHtml or createVml depending on the dialect and style settings.

Parameters

containerDOM node that will contain the shape.

createSvg

mxShape.prototype.createSvg = function()

Creates and returns the SVG node(s) to represent this shape.

createVml

mxShape.prototype.createVml = function()

Creates and returns the VML node to represent this shape.

createHtml

mxShape.prototype.createHtml = function()

Creates and returns the HTML DOM node(s) to represent this shape.  This implementation falls back to createVml so that the HTML creation is optional.

reconfigure

mxShape.prototype.reconfigure = function()

Reconfigures this shape.  This will update the colors etc in addition to the bounds or points.

redraw

mxShape.prototype.redraw = function()

Creates and returns the SVG node(s) to represent this shape.

clear

mxShape.prototype.clear = function()

Removes all child nodes and resets all CSS.

updateBoundsFromPoints

mxShape.prototype.updateBoundsFromPoints = function()

Updates the bounds based on the points.

getLabelBounds

mxShape.prototype.getLabelBounds = function(rect)

Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.  This method should not change the rectangle in-place.  This implementation returns the given rect.

getLabelMargins

mxShape.prototype.getLabelMargins= function(rect)

Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.

checkBounds

mxShape.prototype.checkBounds = function()

Returns true if the bounds are not null and all of its variables are numeric.

createVmlGroup

mxShape.prototype.createVmlGroup = function()

Returns the temporary element used for rendering in IE8 standards mode.

redrawShape

mxShape.prototype.redrawShape = function()

Updates the SVG or VML shape.

createCanvas

mxShape.prototype.createCanvas = function()

Creates a new canvas for drawing this shape.  May return null.

createSvgCanvas

mxShape.prototype.createSvgCanvas = function()

Creates and returns an mxSvgCanvas2D for rendering this shape.

createVmlCanvas

mxShape.prototype.createVmlCanvas = function()

Creates and returns an mxVmlCanvas2D for rendering this shape.

updateVmlContainer

mxShape.prototype.updateVmlContainer = function()

Updates the bounds of the VML container.

redrawHtml

mxShape.prototype.redrawHtmlShape = function()

Allow optimization by replacing VML with HTML.

updateHtmlFilters

mxShape.prototype.updateHtmlFilters = function(node)

Allow optimization by replacing VML with HTML.

mixedModeHtml

Allow optimization by replacing VML with HTML.

mixedModeHtml

Allow optimization by replacing VML with HTML.

destroyCanvas

mxShape.prototype.destroyCanvas = function(canvas)

Destroys the given canvas which was used for drawing.  This implementation increments the reference counts on all shared gradients used in the canvas.

paint

mxShape.prototype.paint = function(c)

Generic rendering code.

configureCanvas

mxShape.prototype.configureCanvas = function(c,
x,
y,
w,
h)

Sets the state of the canvas for drawing the shape.

getGradientBounds

mxShape.prototype.getGradientBounds = function(c,
x,
y,
w,
h)

Returns the bounding box for the gradient box for this shape.

updateTransform

mxShape.prototype.updateTransform = function(c,
x,
y,
w,
h)

Sets the scale and rotation on the given canvas.

paintVertexShape

mxShape.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Paints the vertex shape.

paintBackground

mxShape.prototype.paintBackground = function(c,
x,
y,
w,
h)

Hook for subclassers.  This implementation is empty.

paintForeground

mxShape.prototype.paintForeground = function(c,
x,
y,
w,
h)

Hook for subclassers.  This implementation is empty.

paintEdgeShape

mxShape.prototype.paintEdgeShape = function(c,
pts)

Hook for subclassers.  This implementation is empty.

getArcSize

mxShape.prototype.getArcSize = function(w,
h)

Returns the arc size for the given dimension.

paintGlassEffect

mxShape.prototype.paintGlassEffect = function(c,
x,
y,
w,
h,
arc)

Paints the glass gradient effect.

addPoints

mxShape.prototype.addPoints = function(c,
pts,
rounded,
arcSize,
close,
exclude,
initialMove)

Paints the given points with rounded corners.

resetStyles

mxShape.prototype.resetStyles = function()

Resets all styles.

apply

mxShape.prototype.apply = function(state)

Applies the style of the given mxCellState to the shape.  This implementation assigns the following styles to local fields:

This keeps a reference to the style.  If you need to keep a reference to the cell, you can override this method and store a local reference to state.cell or the mxCellState itself.  If outline should be true, make sure to set it before calling this method.

Parameters

statemxCellState of the corresponding cell.

setCursor

mxShape.prototype.setCursor = function(cursor)

Sets the cursor on the given shape.

Parameters

cursorThe cursor to be used.

getCursor

mxShape.prototype.getCursor = function()

Returns the current cursor.

isRoundable

mxShape.prototype.isRoundable = function()

Hook for subclassers.

updateBoundingBox

mxShape.prototype.updateBoundingBox = function()

Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.

createBoundingBox

mxShape.prototype.createBoundingBox = function()

Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.

augmentBoundingBox

mxShape.prototype.augmentBoundingBox = function(bbox)

Augments the bounding box with the strokewidth and shadow offsets.

isPaintBoundsInverted

mxShape.prototype.isPaintBoundsInverted = function()

Returns true if the bounds should be inverted.

getRotation

mxShape.prototype.getRotation = function()

Returns the rotation from the style.

getTextRotation

mxShape.prototype.getTextRotation = function()

Returns the rotation for the text label.

getShapeRotation

mxShape.prototype.getShapeRotation = function()

Returns the actual rotation of the shape.

createTransparentSvgRectangle

mxShape.prototype.createTransparentSvgRectangle = function(x,
y,
w,
h)

Adds a transparent rectangle that catches all events.

setTransparentBackgroundImage

mxShape.prototype.setTransparentBackgroundImage = function(node)

Sets a transparent background CSS style to catch all events.

Paints the line shape.

releaseSvgGradients

mxShape.prototype.releaseSvgGradients = function(grads)

Paints the line shape.

destroy

mxShape.prototype.destroy = function()

Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.

mxStencil

Implements a generic shape which is based on a XML node as a description.

shape

The outer element is shape, that has attributes

  • ”name”, string, required.  The stencil name that uniquely identifies the shape.
  • ”w” and “h” are optional decimal view bounds.  This defines your co-ordinate system for the graphics operations in the shape.  The default is 100,100.
  • ”aspect”, optional string.  Either “variable”, the default, or “fixed”.  Fixed means always render the shape with the aspect ratio defined by the ratio w/h.  Variable causes the ratio to match that of the geometry of the current vertex.
  • ”strokewidth”, optional string.  Either an integer or the string “inherit”.  “inherit” indicates that the strokeWidth of the cell is only changed on scaling, not on resizing.  Default is “1”.  If numeric values are used, the strokeWidth of the cell is changed on both scaling and resizing and the value defines the multiple that is applied to the width.

connections

If you want to define specific fixed connection points on the shape use the connections element.  Each constraint element within connections defines a fixed connection point on the shape.  Constraints have attributes:

  • ”perimeter”, required.  1 or 0.  0 sets the connection point where specified by x,y.  1 Causes the position of the connection point to be extrapolated from the center of the shape, through x,y to the point of intersection with the perimeter of the shape.
  • ”x” and “y” are the position of the fixed point relative to the bounds of the shape.  They can be automatically adjusted if perimeter=1.  So, (0,0) is top left, (0.5,0.5) the center, (1,0.5) the center of the right hand edge of the bounds, etc.  Values may be less than 0 or greater than 1 to be positioned outside of the shape.
  • ”name”, optional string.  A unique identifier for the port on the shape.

background and foreground

The path of the graphics drawing is split into two elements, foreground and background.  The split is to define which part any shadow applied to the shape is derived from (the background).  This, generally, means the background is the line tracing of the outside of the shape, but not always.

Any stroke, fill or fillstroke of a background must be the first element of the foreground element, they must not be used within background.  If the background is empty, this is not required.

Because the background cannot have any fill or stroke, it can contain only one path, rect, roundrect or ellipse element (or none).  It can also not include image, text or include-shape.

Note that the state, styling and drawing in mxGraph stencils is very close in design to that of HTML 5 canvas.  Tutorials on this subject, if you’re not familiar with the topic, will give a good high-level introduction to the concepts used.

State

Rendering within the foreground and background elements has the concept of state.  There are two types of operations other than state save/load, styling and drawing.  The styling operations change the current state, so you can save the current state with <save/> and pull the last saved state from the state stack using <restore/>.

Styling

The elements that change colors within the current state all take a hash prefixed hex color code (“#FFEA80”).

  • strokecolor, this sets the color that drawing paths will be rendered in when a stroke or fillstroke command is issued.
  • fillcolor, this sets the color that the inside of closed paths will be rendered in when a fill or fillstroke command is issued.
  • fontcolor, this sets the color that fonts are rendered in when text is drawn.

alpha defines the degree of transparency used between 1.0 for fully opaque and 0.0 for fully transparent.

fillalpha defines the degree of fill transparency used between 1.0 for fully opaque and 0.0 for fully transparent.

strokealpha defines the degree of stroke transparency used between 1.0 for fully opaque and 0.0 for fully transparent.

strokewidth defines the integer thickness of drawing elements rendered by stroking.  Use fixed=”1” to apply the value as-is, without scaling.

dashed is “1” for dashing enabled and “0” for disabled.

When dashed is enabled the current dash pattern, defined by dashpattern, is used on strokes. dashpattern is a sequence of space separated “on, off” lengths that define what distance to paint the stroke for, then what distance to paint nothing for, repeat...  The default is “3 3”.  You could define a more complex pattern with “5 3 2 6”, for example.  Generally, it makes sense to have an even number of elements in the dashpattern, but that’s not required.

linejoin, linecap and miterlimit are best explained by the Mozilla page on Canvas styling (about halfway down).  The values are all the same except we use “flat” for linecap, instead of Canvas’ “butt”.

For font styling there are.

  • fontsize, an integer,
  • fontstyle, an ORed bit pattern of bold (1), italic (2) and underline (4), i.e bold underline is “5”.
  • fontfamily, is a string defining the typeface to be used.

Drawing

Most drawing is contained within a path element.  Again, the graphic primitives are very similar to that of HTML 5 canvas.

  • move to attributes required decimals (x,y).
  • line to attributes required decimals (x,y).
  • quad to required decimals (x2,y2) via control point required decimals (x1,y1).
  • curve to required decimals (x3,y3), via control points required decimals (x1,y1) and (x2,y2).
  • arc, this doesn’t follow the HTML Canvas signatures, instead it’s a copy of the SVG arc command.  The SVG specification documentation gives the best description of its behaviors.  The attributes are named identically, they are decimals and all required.
  • close ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath.

Complex drawing

In addition to the graphics primitive operations there are non-primitive operations.  These provide an easy method to draw some basic shapes.

  • rect, attributes “x”, “y”, “w”, “h”, all required decimals
  • roundrect, attributes “x”, “y”, “w”, “h”, all required decimals.  Also “arcsize” an optional decimal attribute defining how large, the corner curves are.
  • ellipse, attributes “x”, “y”, “w”, “h”, all required decimals.

Note that these 3 shapes and all paths must be followed by either a fill, stroke, or fillstroke.

Text

text elements have the following attributes.

  • ”str”, the text string to display, required.
  • ”x” and “y”, the decimal location (x,y) of the text element, required.
  • ”align”, the horizontal alignment of the text element, either “left”, “center” or “right”.  Optional, default is “left”.
  • ”valign”, the vertical alignment of the text element, either “top”, “middle” or “bottom”.  Optional, default is “top”.
  • ”localized”, 0 or 1, if 1 then the “str” actually contains a key to use to fetch the value out of mxResources.  Optional, default is mxStencil.defaultLocalized.
  • ”vertical”, 0 or 1, if 1 the label is rendered vertically (rotated by 90 degrees).  Optional, default is 0.
  • ”rotation”, angle in degrees (0 to 360).  The angle to rotate the text by.  Optional, default is 0.
  • ”align-shape”, 0 or 1, if 0 ignore the rotation of the shape when setting the text rotation.  Optional, default is 1.

If allowEval is true, then the text content of the this element can define a function which is invoked with the shape as the only argument and returns the value for the text element (ignored if the str attribute is not null).

Images

image elements can either be external URLs, or data URIs, where supported (not in IE 7-).  Attributes are:

  • ”src”, required string.  Either a data URI or URL.
  • ”x”, “y”, required decimals.  The (x,y) position of the image.
  • ”w”, “h”, required decimals.  The width and height of the image.
  • ”flipH” and “flipV”, optional 0 or 1.  Whether to flip the image along the horizontal/vertical axis.  Default is 0 for both.

If allowEval is true, then the text content of the this element can define a function which is invoked with the shape as the only argument and returns the value for the image source (ignored if the src attribute is not null).

Sub-shapes

include-shape allow stencils to be rendered within the current stencil by referencing the sub-stencil by name.  Attributes are:

  • ”name”, required string.  The unique shape name of the stencil.
  • ”x”, “y”, “w”, “h”, required decimals.  The (x,y) position of the sub-shape and its width and height.
Summary
Functions
mxStencilConstructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.
Variables
defaultLocalizedStatic global variable that specifies the default value for the localized attribute of the text element.
Functions
allowEvalStatic global switch that specifies if the use of eval is allowed for evaluating text content and images.
Variables
descHolds the XML node with the stencil description.
constraintsHolds an array of mxConnectionConstraints as defined in the shape.
aspectHolds the aspect of the shape.
w0Holds the width of the shape.
h0Holds the height of the shape.
bgNodesHolds the XML node with the stencil description.
fgNodesHolds the XML node with the stencil description.
strokewidthHolds the strokewidth direction from the description.
Functions
parseDescriptionReads w0, h0, aspect, bgNodes and fgNodes from desc.
parseConstraintsReads the constraints from desc into constraints using parseConstraint.
parseConstraintParses the given XML node and returns its mxConnectionConstraint.
evaluateTextAttributeGets the given attribute as a text.
evaluateAttributeGets the attribute for the given name from the given node.
drawShapeDraws this stencil inside the given bounds.
drawChildrenDraws this stencil inside the given bounds.
computeAspectReturns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.
drawNodeDraws this stencil inside the given bounds.

Functions

mxStencil

function mxStencil(desc)

Constructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.

Parameters

descXML node that contains the stencil description.

Variables

defaultLocalized

mxStencil.defaultLocalized

Static global variable that specifies the default value for the localized attribute of the text element.  Default is false.

Functions

allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content and images.  Default is false.  Set this to true if stencils can not contain user input.

Variables

desc

mxStencil.prototype.desc

Holds the XML node with the stencil description.

constraints

mxStencil.prototype.constraints

Holds an array of mxConnectionConstraints as defined in the shape.

aspect

mxStencil.prototype.aspect

Holds the aspect of the shape.  Default is ‘auto’.

w0

mxStencil.prototype.w0

Holds the width of the shape.  Default is 100.

h0

mxStencil.prototype.h0

Holds the height of the shape.  Default is 100.

bgNodes

Holds the XML node with the stencil description.

fgNodes

Holds the XML node with the stencil description.

strokewidth

mxStencil.prototype.strokewidth

Holds the strokewidth direction from the description.

Functions

parseDescription

mxStencil.prototype.parseDescription = function()

Reads w0, h0, aspect, bgNodes and fgNodes from desc.

parseConstraints

mxStencil.prototype.parseConstraints = function()

Reads the constraints from desc into constraints using parseConstraint.

parseConstraint

mxStencil.prototype.parseConstraint = function(node)

Parses the given XML node and returns its mxConnectionConstraint.

evaluateTextAttribute

mxStencil.prototype.evaluateTextAttribute = function(node,
attribute,
shape)

Gets the given attribute as a text.  The return value from evaluateAttribute is used as a key to mxResources.get if the localized attribute in the text node is 1 or if defaultLocalized is true.

evaluateAttribute

mxStencil.prototype.evaluateAttribute = function(node,
attribute,
shape)

Gets the attribute for the given name from the given node.  If the attribute does not exist then the text content of the node is evaluated and if it is a function it is invoked with <shape> as the only argument and the return value is used as the attribute value to be returned.

drawShape

mxStencil.prototype.drawShape = function(canvas,
shape,
x,
y,
w,
h)

Draws this stencil inside the given bounds.

drawChildren

mxStencil.prototype.drawChildren = function(canvas,
shape,
x,
y,
w,
h,
node,
aspect,
disableShadow,
paint)

Draws this stencil inside the given bounds.

computeAspect

mxStencil.prototype.computeAspect = function(shape,
x,
y,
w,
h,
direction)

Returns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.

Parameters

shapemxShape to be drawn.
boundsmxRectangle that should contain the stencil.
directionOptional direction of the shape to be darwn.

drawNode

mxStencil.prototype.drawNode = function(canvas,
shape,
node,
aspect,
disableShadow,
paint)

Draws this stencil inside the given bounds.

mxStencilRegistry

A singleton class that provides a registry for stencils and the methods for painting those stencils onto a canvas or into a DOM.

Summary
Functions
addStencilAdds the given mxStencil.
getStencilReturns the mxStencil for the given name.

Functions

addStencil

addStencil: function(name,
stencil)

Adds the given mxStencil.

getStencil

getStencil: function(name)

Returns the mxStencil for the given name.

mxMarker

A static class that implements all markers for VML and SVG using a registry.  NOTE: The signatures in this class will change.

Summary
Variables
markersMaps from markers names to functions to paint the markers.
Functions
addMarkerAdds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.
createMarkerReturns a function to paint the given marker.

Variables

markers

Maps from markers names to functions to paint the markers.

Functions

addMarker

addMarker: function(type,
funct)

Adds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.

createMarker

createMarker: function(canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled)

Returns a function to paint the given marker.

mxActor

Extends mxShape to implement an actor shape.  If a custom shape with one filled area is needed, then this shape’s redrawPath should be overridden.

Example

function SampleShape() { }

SampleShape.prototype = new mxActor();
SampleShape.prototype.constructor = vsAseShape;

mxCellRenderer.registerShape('sample', SampleShape);
SampleShape.prototype.redrawPath = function(path, x, y, w, h)
{
  path.moveTo(0, 0);
  path.lineTo(w, h);
  // ...
  path.close();
}

This shape is registered under mxConstants.SHAPE_ACTOR in mxCellRenderer.

Summary
Functions
mxActorConstructs a new actor shape.
paintVertexShapeRedirects to redrawPath for subclasses to work.
redrawPathDraws the path for this shape.

Functions

mxActor

function mxActor(bounds,
fill,
stroke,
strokewidth)

Constructs a new actor shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

paintVertexShape

mxActor.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Redirects to redrawPath for subclasses to work.

redrawPath

mxActor.prototype.redrawPath = function(c,
x,
y,
w,
h)

Draws the path for this shape.

mxCloud

Extends mxActor to implement a cloud shape.

This shape is registered under mxConstants.SHAPE_CLOUD in mxCellRenderer.

Summary
Functions
mxCloudConstructs a new cloud shape.
redrawPathDraws the path for this shape.

Functions

mxCloud

function mxCloud(bounds,
fill,
stroke,
strokewidth)

Constructs a new cloud shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

redrawPath

mxCloud.prototype.redrawPath = function(c,
x,
y,
w,
h)

Draws the path for this shape.

mxRectangleShape

Extends mxShape to implement a rectangle shape.  This shape is registered under mxConstants.SHAPE_RECTANGLE in mxCellRenderer.

Summary
Functions
mxRectangleShapeConstructs a new rectangle shape.
isHtmlAllowedReturns true for non-rounded, non-rotated shapes with no glass gradient.
paintBackgroundGeneric background painting implementation.
isRoundableAdds roundable support.
paintForegroundGeneric background painting implementation.

Functions

mxRectangleShape

function mxRectangleShape(bounds,
fill,
stroke,
strokewidth)

Constructs a new rectangle shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

isHtmlAllowed

mxRectangleShape.prototype.isHtmlAllowed = function()

Returns true for non-rounded, non-rotated shapes with no glass gradient.

paintBackground

mxRectangleShape.prototype.paintBackground = function(c,
x,
y,
w,
h)

Generic background painting implementation.

isRoundable

mxRectangleShape.prototype.isRoundable = function(c,
x,
y,
w,
h)

Adds roundable support.

paintForeground

mxRectangleShape.prototype.paintForeground = function(c,
x,
y,
w,
h)

Generic background painting implementation.

mxEllipse

Extends mxShape to implement an ellipse shape.  This shape is registered under mxConstants.SHAPE_ELLIPSE in mxCellRenderer.

Summary
Functions
mxEllipseConstructs a new ellipse shape.
paintVertexShapePaints the ellipse shape.

Functions

mxEllipse

function mxEllipse(bounds,
fill,
stroke,
strokewidth)

Constructs a new ellipse shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

paintVertexShape

mxEllipse.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Paints the ellipse shape.

mxDoubleEllipse

Extends mxShape to implement a double ellipse shape.  This shape is registered under mxConstants.SHAPE_DOUBLE_ELLIPSE in mxCellRenderer.  Use the following override to only fill the inner ellipse in this shape:

mxDoubleEllipse.prototype.paintVertexShape = function(c, x, y, w, h)
{
  c.ellipse(x, y, w, h);
  c.stroke();

  var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
  x += inset;
  y += inset;
  w -= 2 * inset;
  h -= 2 * inset;

  if (w > 0 && h > 0)
  {
    c.ellipse(x, y, w, h);
  }

  c.fillAndStroke();
};
Summary
Functions
mxDoubleEllipseConstructs a new ellipse shape.
Variables
vmlScaleScale for improving the precision of VML rendering.
Functions
paintBackgroundPaints the background.
paintForegroundPaints the foreground.
getLabelBoundsReturns the bounds for the label.

Functions

mxDoubleEllipse

function mxDoubleEllipse(bounds,
fill,
stroke,
strokewidth)

Constructs a new ellipse shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

Variables

vmlScale

mxDoubleEllipse.prototype.vmlScale

Scale for improving the precision of VML rendering.  Default is 10.

Functions

paintBackground

mxDoubleEllipse.prototype.paintBackground = function(c,
x,
y,
w,
h)

Paints the background.

paintForeground

mxDoubleEllipse.prototype.paintForeground = function(c,
x,
y,
w,
h)

Paints the foreground.

getLabelBounds

mxDoubleEllipse.prototype.getLabelBounds = function(rect)

Returns the bounds for the label.

mxRhombus

Extends mxShape to implement a rhombus (aka diamond) shape.  This shape is registered under mxConstants.SHAPE_RHOMBUS in mxCellRenderer.

Summary
Functions
mxRhombusConstructs a new rhombus shape.
isRoundableAdds roundable support.
paintVertexShapeGeneric painting implementation.

Functions

mxRhombus

function mxRhombus(bounds,
fill,
stroke,
strokewidth)

Constructs a new rhombus shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

isRoundable

mxRhombus.prototype.isRoundable = function()

Adds roundable support.

paintVertexShape

mxRhombus.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Generic painting implementation.

mxPolyline

Extends mxShape to implement a polyline (a line with multiple points).  This shape is registered under <mxConstants.SHAPE_POLYLINE> in mxCellRenderer.

Summary
Functions
mxPolylineConstructs a new polyline shape.
getRotationReturns 0.
getShapeRotationReturns 0.
isPaintBoundsInvertedReturns false.
paintEdgeShapePaints the line shape.
paintLinePaints the line shape.
paintLinePaints the line shape.

Functions

mxPolyline

function mxPolyline(points,
stroke,
strokewidth)

Constructs a new polyline shape.

Parameters

pointsArray of mxPoints that define the points.  This is stored in mxShape.points.
strokeString that defines the stroke color.  Default is ‘black’.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

getRotation

mxPolyline.prototype.getRotation = function()

Returns 0.

getShapeRotation

mxPolyline.prototype.getShapeRotation = function()

Returns 0.

isPaintBoundsInverted

mxPolyline.prototype.isPaintBoundsInverted = function()

Returns false.

paintEdgeShape

mxPolyline.prototype.paintEdgeShape = function(c,
pts)

Paints the line shape.

paintLine

mxPolyline.prototype.paintLine = function(c,
pts,
rounded)

Paints the line shape.

paintLine

Paints the line shape.

mxArrow

Extends mxShape to implement an arrow shape.  (The shape is used to represent edges, not vertices.)  This shape is registered under mxConstants.SHAPE_ARROW in mxCellRenderer.

Summary
Functions
mxArrowConstructs a new arrow shape.
augmentBoundingBoxAugments the bounding box with the edge width and markers.
paintEdgeShapePaints the line shape.

Functions

mxArrow

function mxArrow(points,
fill,
stroke,
strokewidth,
arrowWidth,
spacing,
endSize)

Constructs a new arrow shape.

Parameters

pointsArray of mxPoints that define the points.  This is stored in mxShape.points.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.
arrowWidthOptional integer that defines the arrow width.  Default is mxConstants.ARROW_WIDTH.  This is stored in <arrowWidth>.
spacingOptional integer that defines the spacing between the arrow shape and its endpoints.  Default is mxConstants.ARROW_SPACING.  This is stored in <spacing>.
endSizeOptional integer that defines the size of the arrowhead.  Default is mxConstants.ARROW_SIZE.  This is stored in <endSize>.

augmentBoundingBox

mxArrow.prototype.augmentBoundingBox = function(bbox)

Augments the bounding box with the edge width and markers.

paintEdgeShape

mxArrow.prototype.paintEdgeShape = function(c,
pts)

Paints the line shape.

mxArrowConnector

Extends mxShape to implement an new rounded arrow shape with support for waypoints and double arrows.  (The shape is used to represent edges, not vertices.)  This shape is registered under mxConstants.SHAPE_ARROW_CONNECTOR in mxCellRenderer.

Summary
Functions
mxArrowConnectorConstructs a new arrow shape.
Variables
useSvgBoundingBoxAllows to use the SVG bounding box in SVG.
resetStylesOverrides mxShape to reset spacing.
Functions
augmentBoundingBoxAugments the bounding box with the edge width and markers.
paintEdgeShapePaints the line shape.
paintEdgeShapePaints the line shape.
isArrowRoundedReturns wether the arrow is rounded
getStartArrowWidthReturns the width of the start arrow
getEndArrowWidthReturns the width of the end arrow
getEdgeWidthReturns the width of the body of the edge
isOpenEndedReturns whether the ends of the shape are drawn
isMarkerStartReturns whether the start marker is drawn
isMarkerEndReturns whether the end marker is drawn

Functions

mxArrowConnector

function mxArrowConnector(points,
fill,
stroke,
strokewidth,
arrowWidth,
spacing,
endSize)

Constructs a new arrow shape.

Parameters

pointsArray of mxPoints that define the points.  This is stored in mxShape.points.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.
arrowWidthOptional integer that defines the arrow width.  Default is mxConstants.ARROW_WIDTH.  This is stored in <arrowWidth>.
spacingOptional integer that defines the spacing between the arrow shape and its endpoints.  Default is mxConstants.ARROW_SPACING.  This is stored in <spacing>.
endSizeOptional integer that defines the size of the arrowhead.  Default is mxConstants.ARROW_SIZE.  This is stored in <endSize>.

Variables

useSvgBoundingBox

mxArrowConnector.prototype.useSvgBoundingBox

Allows to use the SVG bounding box in SVG.  Default is false for performance reasons.

resetStyles

mxArrowConnector.prototype.resetStyles

Overrides mxShape to reset spacing.

Functions

augmentBoundingBox

mxArrowConnector.prototype.augmentBoundingBox = function(bbox)

Augments the bounding box with the edge width and markers.

paintEdgeShape

mxArrowConnector.prototype.paintEdgeShape = function(c,
pts)

Paints the line shape.

paintEdgeShape

Paints the line shape.

isArrowRounded

mxArrowConnector.prototype.isArrowRounded = function()

Returns wether the arrow is rounded

getStartArrowWidth

mxArrowConnector.prototype.getStartArrowWidth = function()

Returns the width of the start arrow

getEndArrowWidth

mxArrowConnector.prototype.getEndArrowWidth = function()

Returns the width of the end arrow

getEdgeWidth

mxArrowConnector.prototype.getEdgeWidth = function()

Returns the width of the body of the edge

isOpenEnded

mxArrowConnector.prototype.isOpenEnded = function()

Returns whether the ends of the shape are drawn

isMarkerStart

mxArrowConnector.prototype.isMarkerStart = function()

Returns whether the start marker is drawn

isMarkerEnd

mxArrowConnector.prototype.isMarkerEnd = function()

Returns whether the end marker is drawn

mxText

Extends mxShape to implement a text shape.  To change vertical text from bottom to top to top to bottom, the following code can be used:

mxText.prototype.verticalTextRotation = 90;
Summary
Functions
mxTextConstructs a new text shape.
Variables
baseSpacingTopSpecifies the spacing to be added to the top spacing.
baseSpacingBottomSpecifies the spacing to be added to the bottom spacing.
baseSpacingLeftSpecifies the spacing to be added to the left spacing.
baseSpacingRightSpecifies the spacing to be added to the right spacing.
replaceLinefeedsSpecifies if linefeeds in HTML labels should be replaced with BR tags.
verticalTextRotationRotation for vertical text.
ignoreClippedStringSizeSpecifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle.
ignoreStringSizeSpecifies if the actual string size should be measured.
textWidthPaddingSpecifies the padding to be added to the text width for the bounding box.
lastValueContains the last rendered text value.
cacheEnabledSpecifies if caching for HTML labels should be enabled.
Functions
isParseVmlText shapes do not contain VML markup and do not need to be parsed.
isHtmlAllowedReturns true if HTML is allowed for this shape.
getSvgScreenOffsetDisables offset in IE9 for crisper image output.
checkBoundsReturns true if the bounds are not null and all of its variables are numeric.
paintGeneric rendering code.
redrawRenders the text using the given DOM nodes.
resetStylesResets all styles.
applyExtends mxShape to update the text styles.
getAutoDirectionUsed to determine the automatic text direction.
updateBoundingBoxUpdates the <boundingBox> for this shape using the given node and position.
getShapeRotationReturns 0 to avoid using rotation in the canvas via updateTransform.
getTextRotationReturns the rotation for the text label of the corresponding shape.
isPaintBoundsInvertedInverts the bounds if <mxShape.isBoundsInverted> returns true or if the horizontal style is false.
configureCanvasSets the state of the canvas for drawing the shape.
updateVmlContainerSets the width and height of the container to 1px.
redrawHtmlShapeUpdates the HTML node(s) to reflect the latest bounds and scale.
updateHtmlTransformReturns the spacing as an mxPoint.
setInnerHtmlSets the inner HTML of the given element to the <value>.
updateHtmlFilterRotated text rendering quality is bad for IE9 quirks/IE8 standards
updateValueUpdates the HTML node(s) to reflect the latest bounds and scale.
updateFontUpdates the HTML node(s) to reflect the latest bounds and scale.
updateSizeUpdates the HTML node(s) to reflect the latest bounds and scale.
getMarginReturns the spacing as an mxPoint.
getSpacingReturns the spacing as an mxPoint.

Functions

mxText

function mxText(value,
bounds,
align,
valign,
color,
family,
size,
fontStyle,
spacing,
spacingTop,
spacingRight,
spacingBottom,
spacingLeft,
horizontal,
background,
border,
wrap,
clipped,
overflow,
labelPadding,
textDirection)

Constructs a new text shape.

Parameters

valueString that represents the text to be displayed.  This is stored in <value>.
boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
alignSpecifies the horizontal alignment.  Default is ‘’.  This is stored in <align>.
valignSpecifies the vertical alignment.  Default is ‘’.  This is stored in <valign>.
colorString that specifies the text color.  Default is ‘black’.  This is stored in <color>.
familyString that specifies the font family.  Default is mxConstants.DEFAULT_FONTFAMILY.  This is stored in <family>.
sizeInteger that specifies the font size.  Default is mxConstants.DEFAULT_FONTSIZE.  This is stored in <size>.
fontStyleSpecifies the font style.  Default is 0.  This is stored in <fontStyle>.
spacingInteger that specifies the global spacing.  Default is 2.  This is stored in <spacing>.
spacingTopInteger that specifies the top spacing.  Default is 0.  The sum of the spacing and this is stored in <spacingTop>.
spacingRightInteger that specifies the right spacing.  Default is 0.  The sum of the spacing and this is stored in <spacingRight>.
spacingBottomInteger that specifies the bottom spacing.  Default is 0.The sum of the spacing and this is stored in <spacingBottom>.
spacingLeftInteger that specifies the left spacing.  Default is 0.  The sum of the spacing and this is stored in <spacingLeft>.
horizontalBoolean that specifies if the label is horizontal.  Default is true.  This is stored in <horizontal>.
backgroundString that specifies the background color.  Default is null.  This is stored in <background>.
borderString that specifies the label border color.  Default is null.  This is stored in <border>.
wrapSpecifies if word-wrapping should be enabled.  Default is false.  This is stored in <wrap>.
clippedSpecifies if the label should be clipped.  Default is false.  This is stored in <clipped>.
overflowValue of the overflow style.  Default is ‘visible’.

Variables

baseSpacingTop

mxText.prototype.baseSpacingTop

Specifies the spacing to be added to the top spacing.  Default is 0.  Use the value 5 here to get the same label positions as in mxGraph 1.x.

baseSpacingBottom

mxText.prototype.baseSpacingBottom

Specifies the spacing to be added to the bottom spacing.  Default is 0.  Use the value 1 here to get the same label positions as in mxGraph 1.x.

baseSpacingLeft

mxText.prototype.baseSpacingLeft

Specifies the spacing to be added to the left spacing.  Default is 0.

baseSpacingRight

mxText.prototype.baseSpacingRight

Specifies the spacing to be added to the right spacing.  Default is 0.

replaceLinefeeds

mxText.prototype.replaceLinefeeds

Specifies if linefeeds in HTML labels should be replaced with BR tags.  Default is true.

verticalTextRotation

mxText.prototype.verticalTextRotation

Rotation for vertical text.  Default is -90 (bottom to top).

ignoreClippedStringSize

mxText.prototype.ignoreClippedStringSize

Specifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle.  If this is true, then the bounding box will be set to <bounds>.  Default is true.  ignoreStringSize has precedence over this switch.

ignoreStringSize

mxText.prototype.ignoreStringSize

Specifies if the actual string size should be measured.  If disabled the boundingBox will not ignore the actual size of the string, otherwise <bounds> will be used instead.  Default is false.

textWidthPadding

mxText.prototype.textWidthPadding

Specifies the padding to be added to the text width for the bounding box.  This is needed to make sure no clipping is applied to borders.  Default is 4 for IE 8 standards mode and 3 for all others.

lastValue

mxText.prototype.lastValue

Contains the last rendered text value.  Used for caching.

cacheEnabled

mxText.prototype.cacheEnabled

Specifies if caching for HTML labels should be enabled.  Default is true.

Functions

isParseVml

mxText.prototype.isParseVml = function()

Text shapes do not contain VML markup and do not need to be parsed.  This method returns false to speed up rendering in IE8.

isHtmlAllowed

mxText.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape.  This implementation returns true if the browser is not in IE8 standards mode.

getSvgScreenOffset

mxText.prototype.getSvgScreenOffset = function()

Disables offset in IE9 for crisper image output.

checkBounds

mxText.prototype.checkBounds = function()

Returns true if the bounds are not null and all of its variables are numeric.

paint

mxText.prototype.paint = function(c,
update)

Generic rendering code.

redraw

mxText.prototype.redraw = function()

Renders the text using the given DOM nodes.

resetStyles

mxText.prototype.resetStyles = function()

Resets all styles.

apply

mxText.prototype.apply = function(state)

Extends mxShape to update the text styles.

Parameters

statemxCellState of the corresponding cell.

getAutoDirection

mxText.prototype.getAutoDirection = function()

Used to determine the automatic text direction.  Returns mxConstants.TEXT_DIRECTION_LTR or mxConstants.TEXT_DIRECTION_RTL depending on the contents of <value>.  This is not invoked for HTML, wrapped content or if <value> is a DOM node.

updateBoundingBox

mxText.prototype.updateBoundingBox = function()

Updates the <boundingBox> for this shape using the given node and position.

getShapeRotation

mxText.prototype.getShapeRotation = function()

Returns 0 to avoid using rotation in the canvas via updateTransform.

getTextRotation

mxText.prototype.getTextRotation = function()

Returns the rotation for the text label of the corresponding shape.

isPaintBoundsInverted

mxText.prototype.isPaintBoundsInverted = function()

Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the horizontal style is false.

configureCanvas

mxText.prototype.configureCanvas = function(c,
x,
y,
w,
h)

Sets the state of the canvas for drawing the shape.

updateVmlContainer

mxText.prototype.updateVmlContainer = function()

Sets the width and height of the container to 1px.

redrawHtmlShape

mxText.prototype.redrawHtmlShape = function()

Updates the HTML node(s) to reflect the latest bounds and scale.

updateHtmlTransform

mxText.prototype.updateHtmlTransform = function()

Returns the spacing as an mxPoint.

setInnerHtml

Sets the inner HTML of the given element to the <value>.

updateHtmlFilter

mxText.prototype.updateHtmlFilter = function()

Rotated text rendering quality is bad for IE9 quirks/IE8 standards

updateValue

mxText.prototype.updateValue = function()

Updates the HTML node(s) to reflect the latest bounds and scale.

updateFont

mxText.prototype.updateFont = function(node)

Updates the HTML node(s) to reflect the latest bounds and scale.

updateSize

mxText.prototype.updateSize = function(node,
enableWrap)

Updates the HTML node(s) to reflect the latest bounds and scale.

getMargin

Returns the spacing as an mxPoint.

getSpacing

mxText.prototype.getSpacing = function()

Returns the spacing as an mxPoint.

mxTriangle

Implementation of the triangle shape.

Summary
Functions
mxTriangleConstructs a new triangle shape.
isRoundableAdds roundable support.
redrawPathDraws the path for this shape.

Functions

mxTriangle

function mxTriangle()

Constructs a new triangle shape.

isRoundable

mxTriangle.prototype.isRoundable = function()

Adds roundable support.

redrawPath

mxTriangle.prototype.redrawPath = function(c,
x,
y,
w,
h)

Draws the path for this shape.

mxHexagon

Implementation of the hexagon shape.

Summary
Functions
mxHexagonConstructs a new hexagon shape.
redrawPathDraws the path for this shape.

Functions

mxHexagon

function mxHexagon()

Constructs a new hexagon shape.

redrawPath

mxHexagon.prototype.redrawPath = function(c,
x,
y,
w,
h)

Draws the path for this shape.

mxLine

Extends mxShape to implement a horizontal line shape.  This shape is registered under mxConstants.SHAPE_LINE in mxCellRenderer.

Summary
Functions
mxLineConstructs a new line shape.
paintVertexShapeRedirects to redrawPath for subclasses to work.

Functions

mxLine

function mxLine(bounds,
stroke,
strokewidth)

Constructs a new line shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
strokeString that defines the stroke color.  Default is ‘black’.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

paintVertexShape

mxLine.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Redirects to redrawPath for subclasses to work.

mxImageShape

Extends mxShape to implement an image shape.  This shape is registered under mxConstants.SHAPE_IMAGE in mxCellRenderer.

Summary
Functions
mxImageShapeConstructs a new image shape.
Variables
preserveImageAspectSwitch to preserve image aspect.
Functions
getSvgScreenOffsetDisables offset in IE9 for crisper image output.
applyOverrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.
isHtmlAllowedReturns true if HTML is allowed for this shape.
createHtmlCreates and returns the HTML DOM node(s) to represent this shape.
isRoundableDisables inherited roundable support.
paintVertexShapeGeneric background painting implementation.
redrawOverrides mxShape.redraw to preserve the aspect ratio of images.

Functions

mxImageShape

function mxImageShape(bounds,
image,
fill,
stroke,
strokewidth)

Constructs a new image shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
imageString that specifies the URL of the image.  This is stored in <image>.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 0.  This is stored in <strokewidth>.

Variables

preserveImageAspect

mxImageShape.prototype.preserveImageAspect

Switch to preserve image aspect.  Default is true.

Functions

getSvgScreenOffset

mxImageShape.prototype.getSvgScreenOffset = function()

Disables offset in IE9 for crisper image output.

apply

mxImageShape.prototype.apply = function(state)

Overrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.

Applies the style of the given mxCellState to the shape.  This implementation assigns the following styles to local fields:

Parameters

statemxCellState of the corresponding cell.

isHtmlAllowed

mxImageShape.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape.  This implementation always returns false.

createHtml

mxImageShape.prototype.createHtml = function()

Creates and returns the HTML DOM node(s) to represent this shape.  This implementation falls back to <createVml> so that the HTML creation is optional.

isRoundable

mxImageShape.prototype.isRoundable = function(c,
x,
y,
w,
h)

Disables inherited roundable support.

paintVertexShape

mxImageShape.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Generic background painting implementation.

redraw

mxImageShape.prototype.redrawHtmlShape = function()

Overrides mxShape.redraw to preserve the aspect ratio of images.

mxLabel

Extends mxShape to implement an image shape with a label.  This shape is registered under mxConstants.SHAPE_LABEL in mxCellRenderer.

Summary
Functions
mxLabelConstructs a new label shape.
Variables
imageSizeDefault width and height for the image.
spacingDefault value for image spacing.
indicatorSizeDefault width and height for the indicicator.
indicatorSpacingDefault spacing between image and indicator.
Functions
initInitializes the shape and the <indicator>.
redrawReconfigures this shape.
isHtmlAllowedReturns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.
paintForegroundGeneric background painting implementation.
paintImageGeneric background painting implementation.
getImageBoundsGeneric background painting implementation.
paintIndicatorGeneric background painting implementation.
getIndicatorBoundsGeneric background painting implementation.
redrawHtmlShapeGeneric background painting implementation.

Functions

mxLabel

function mxLabel(bounds,
fill,
stroke,
strokewidth)

Constructs a new label shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

Variables

imageSize

mxLabel.prototype.imageSize

Default width and height for the image.  Default is mxConstants.DEFAULT_IMAGESIZE.

spacing

mxLabel.prototype.spacing

Default value for image spacing.  Default is 2.

indicatorSize

mxLabel.prototype.indicatorSize

Default width and height for the indicicator.  Default is 10.

indicatorSpacing

mxLabel.prototype.indicatorSpacing

Default spacing between image and indicator.  Default is 2.

Functions

init

mxLabel.prototype.init = function(container)

Initializes the shape and the <indicator>.

redraw

mxLabel.prototype.redraw = function()

Reconfigures this shape.  This will update the colors of the indicator and reconfigure it if required.

isHtmlAllowed

mxLabel.prototype.isHtmlAllowed = function()

Returns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.

paintForeground

mxLabel.prototype.paintForeground = function(c,
x,
y,
w,
h)

Generic background painting implementation.

paintImage

mxLabel.prototype.paintImage = function(c,
x,
y,
w,
h)

Generic background painting implementation.

getImageBounds

mxLabel.prototype.getImageBounds = function(x,
y,
w,
h)

Generic background painting implementation.

paintIndicator

mxLabel.prototype.paintIndicator = function(c,
x,
y,
w,
h)

Generic background painting implementation.

getIndicatorBounds

mxLabel.prototype.getIndicatorBounds = function(x,
y,
w,
h)

Generic background painting implementation.

redrawHtmlShape

mxLabel.prototype.redrawHtmlShape = function()

Generic background painting implementation.

mxCylinder

Extends mxShape to implement an cylinder shape.  If a custom shape with one filled area and an overlay path is needed, then this shape’s redrawPath should be overridden.  This shape is registered under mxConstants.SHAPE_CYLINDER in mxCellRenderer.

Summary
Functions
mxCylinderConstructs a new cylinder shape.
Variables
maxHeightDefines the maximum height of the top and bottom part of the cylinder shape.
svgStrokeToleranceSets stroke tolerance to 0 for SVG.
Functions
paintVertexShapeRedirects to redrawPath for subclasses to work.
redrawPathDraws the path for this shape.
redrawPathDraws the path for this shape.

Functions

mxCylinder

function mxCylinder(bounds,
fill,
stroke,
strokewidth)

Constructs a new cylinder shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

Variables

maxHeight

mxCylinder.prototype.maxHeight

Defines the maximum height of the top and bottom part of the cylinder shape.

svgStrokeTolerance

mxCylinder.prototype.svgStrokeTolerance

Sets stroke tolerance to 0 for SVG.

Functions

paintVertexShape

mxCylinder.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Redirects to redrawPath for subclasses to work.

redrawPath

Draws the path for this shape.

redrawPath

mxCylinder.prototype.redrawPath = function(c,
x,
y,
w,
h,
isForeground)

Draws the path for this shape.

mxConnector

Extends mxShape to implement a connector shape.  The connector shape allows for arrow heads on either side.

This shape is registered under mxConstants.SHAPE_CONNECTOR in mxCellRenderer.

Summary
Functions
mxConnectorConstructs a new connector shape.
updateBoundingBoxUpdates the <boundingBox> for this shape using <createBoundingBox> and augmentBoundingBox and stores the result in <boundingBox>.
paintEdgeShapePaints the line shape.
createMarkerPrepares the marker by adding offsets in pts and returning a function to paint the marker.
augmentBoundingBoxAugments the bounding box with the strokewidth and shadow offsets.

Functions

mxConnector

function mxConnector(points,
stroke,
strokewidth)

Constructs a new connector shape.

Parameters

pointsArray of mxPoints that define the points.  This is stored in mxShape.points.
strokeString that defines the stroke color.  This is stored in <stroke>.  Default is ‘black’.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

updateBoundingBox

mxConnector.prototype.updateBoundingBox = function()

Updates the <boundingBox> for this shape using <createBoundingBox> and augmentBoundingBox and stores the result in <boundingBox>.

paintEdgeShape

mxConnector.prototype.paintEdgeShape = function(c,
pts)

Paints the line shape.

createMarker

mxConnector.prototype.createMarker = function(c,
pts,
source)

Prepares the marker by adding offsets in pts and returning a function to paint the marker.

augmentBoundingBox

mxConnector.prototype.augmentBoundingBox = function(bbox)

Augments the bounding box with the strokewidth and shadow offsets.

mxSwimlane

Extends mxShape to implement a swimlane shape.  This shape is registered under mxConstants.SHAPE_SWIMLANE in mxCellRenderer.  Use the <mxConstants.STYLE_STYLE_STARTSIZE> to define the size of the title region, mxConstants.STYLE_SWIMLANE_FILLCOLOR for the content area fill, mxConstants.STYLE_SEPARATORCOLOR to draw an additional vertical separator and mxConstants.STYLE_SWIMLANE_LINE to hide the line between the title region and the content area.  The mxConstants.STYLE_HORIZONTAL affects the orientation of this shape, not only its label.

Summary
Functions
mxSwimlaneConstructs a new swimlane shape.
Variables
imageSizeDefault imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style.
Functions
isRoundableAdds roundable support.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
getGradientBoundsReturns the bounding box for the gradient box for this shape.
getArcSizeReturns the arcsize for the swimlane.
paintVertexShapePaints the swimlane vertex shape.
paintVertexShapePaints the swimlane vertex shape.
paintSwimlanePaints the swimlane vertex shape.
paintRoundedSwimlanePaints the swimlane vertex shape.
paintDividerPaints the divider between swimlane title and content area.
paintSeparatorPaints the vertical or horizontal separator line between swimlanes.
getImageBoundsPaints the swimlane vertex shape.

Functions

mxSwimlane

function mxSwimlane(bounds,
fill,
stroke,
strokewidth)

Constructs a new swimlane shape.

Parameters

boundsmxRectangle that defines the bounds.  This is stored in mxShape.bounds.
fillString that defines the fill color.  This is stored in <fill>.
strokeString that defines the stroke color.  This is stored in <stroke>.
strokewidthOptional integer that defines the stroke width.  Default is 1.  This is stored in <strokewidth>.

Variables

imageSize

mxSwimlane.prototype.imageSize

Default imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style.  Value is 16.

Functions

isRoundable

mxSwimlane.prototype.isRoundable = function(c,
x,
y,
w,
h)

Adds roundable support.

getGradientBounds

Returns the bounding box for the gradient box for this shape.

getGradientBounds

Returns the bounding box for the gradient box for this shape.

getGradientBounds

mxSwimlane.prototype.getGradientBounds = function(c,
x,
y,
w,
h)

Returns the bounding box for the gradient box for this shape.

getArcSize

mxSwimlane.prototype.getArcSize = function(w,
h,
start)

Returns the arcsize for the swimlane.

paintVertexShape

Paints the swimlane vertex shape.

paintVertexShape

mxSwimlane.prototype.paintVertexShape = function(c,
x,
y,
w,
h)

Paints the swimlane vertex shape.

paintSwimlane

mxSwimlane.prototype.paintSwimlane = function(c,
x,
y,
w,
h,
start,
fill,
swimlaneLine)

Paints the swimlane vertex shape.

paintRoundedSwimlane

mxSwimlane.prototype.paintRoundedSwimlane = function(c,
x,
y,
w,
h,
start,
r,
fill,
swimlaneLine)

Paints the swimlane vertex shape.

paintDivider

mxSwimlane.prototype.paintDivider = function(c,
x,
y,
w,
h,
start,
shadow)

Paints the divider between swimlane title and content area.

paintSeparator

mxSwimlane.prototype.paintSeparator = function(c,
x,
y,
w,
h,
start,
color)

Paints the vertical or horizontal separator line between swimlanes.

getImageBounds

mxSwimlane.prototype.getImageBounds = function(x,
y,
w,
h)

Paints the swimlane vertex shape.

mxGraphLayout

Base class for all layout algorithms in mxGraph.  Main public functions are <move> for handling a moved cell within a layouted parent, and execute for running the layout on a given parent cell.

Known Subclasses

mxCircleLayout, mxCompactTreeLayout, mxCompositeLayout, mxFastOrganicLayout, mxParallelEdgeLayout, mxPartitionLayout, mxStackLayout

Summary
Functions
mxGraphLayoutConstructs a new layout using the given layouts.
Variables
graphReference to the enclosing mxGraph.
useBoundingBoxBoolean indicating if the bounding box of the label should be used if its available.
parentThe parent cell of the layout, if any
Functions
moveCellNotified when a cell is being moved in a parent that has automatic layout to update the cell state (eg.
executeExecutes the layout algorithm for the children of the given parent.
getGraphReturns the graph that this layout operates on.
getConstraintReturns the constraint for the given key and cell.
traverseTraverses the (directed) graph invoking the given function for each visited vertex and edge.
isAncestorReturns true if the given parent is an ancestor of the given child.
isVertexMovableReturns a boolean indicating if the given mxCell is movable or bendable by the algorithm.
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored by the algorithm.
isEdgeIgnoredReturns a boolean indicating if the given mxCell should be ignored by the algorithm.
setEdgeStyleEnabledDisables or enables the edge style of the given edge.
setOrthogonalEdgeDisables or enables orthogonal end segments of the given edge.
getParentOffsetDetermines the offset of the given parent to the parent of the layout
setEdgePointsReplaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.
setVertexLocationSets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true.
getVertexBoundsReturns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.
arrangeGroupsShortcut to mxGraph.updateGroupBounds with moveGroup set to true.

Functions

mxGraphLayout

function mxGraphLayout(graph)

Constructs a new layout using the given layouts.

Arguments

graphEnclosing

Variables

graph

mxGraphLayout.prototype.graph

Reference to the enclosing mxGraph.

useBoundingBox

mxGraphLayout.prototype.useBoundingBox

Boolean indicating if the bounding box of the label should be used if its available.  Default is true.

parent

mxGraphLayout.prototype.parent

The parent cell of the layout, if any

Functions

moveCell

mxGraphLayout.prototype.moveCell = function(cell,
x,
y)

Notified when a cell is being moved in a parent that has automatic layout to update the cell state (eg. index) so that the outcome of the layout will position the vertex as close to the point (x, y) as possible.

Empty implementation.

Parameters

cellmxCell which has been moved.
xX-coordinate of the new cell location.
yY-coordinate of the new cell location.

execute

mxGraphLayout.prototype.execute = function(parent)

Executes the layout algorithm for the children of the given parent.

Parameters

parentmxCell whose children should be layed out.

getGraph

mxGraphLayout.prototype.getGraph = function()

Returns the graph that this layout operates on.

getConstraint

mxGraphLayout.prototype.getConstraint = function(key,
cell,
edge,
source)

Returns the constraint for the given key and cell.  The optional edge and source arguments are used to return inbound and outgoing routing- constraints for the given edge and vertex.  This implementation always returns the value for the given key in the style of the given cell.

Parameters

keyKey of the constraint to be returned.
cellmxCell whose constraint should be returned.
edgeOptional mxCell that represents the connection whose constraint should be returned.  Default is null.
sourceOptional boolean that specifies if the connection is incoming or outgoing.  Default is null.

traverse

mxGraphLayout.traverse = function(vertex,
directed,
func,
edge,
visited)

Traverses the (directed) graph invoking the given function for each visited vertex and edge.  The function is invoked with the current vertex and the incoming edge as a parameter.  This implementation makes sure each vertex is only visited once.  The function may return false if the traversal should stop at the given vertex.

Example

mxLog.show();
var cell = graph.getSelectionCell();
graph.traverse(cell, false, function(vertex, edge)
{
  mxLog.debug(graph.getLabel(vertex));
});

Parameters

vertexmxCell that represents the vertex where the traversal starts.
directedOptional boolean indicating if edges should only be traversed from source to target.  Default is true.
funcVisitor function that takes the current vertex and the incoming edge as arguments.  The traversal stops if the function returns false.
edgeOptional mxCell that represents the incoming edge.  This is null for the first step of the traversal.
visitedOptional mxDictionary of cell paths for the visited cells.

isAncestor

mxGraphLayout.prototype.isAncestor = function(parent,
child,
traverseAncestors)

Returns true if the given parent is an ancestor of the given child.

Parameters

parentmxCell that specifies the parent.
childmxCell that specifies the child.
traverseAncestorsboolean whether to

isVertexMovable

mxGraphLayout.prototype.isVertexMovable = function(cell)

Returns a boolean indicating if the given mxCell is movable or bendable by the algorithm.  This implementation returns true if the given cell is movable in the graph.

Parameters

cellmxCell whose movable state should be returned.

isVertexIgnored

mxGraphLayout.prototype.isVertexIgnored = function(vertex)

Returns a boolean indicating if the given mxCell should be ignored by the algorithm.  This implementation returns false for all vertices.

Parameters

vertexmxCell whose ignored state should be returned.

isEdgeIgnored

mxGraphLayout.prototype.isEdgeIgnored = function(edge)

Returns a boolean indicating if the given mxCell should be ignored by the algorithm.  This implementation returns false for all vertices.

Parameters

cellmxCell whose ignored state should be returned.

setEdgeStyleEnabled

mxGraphLayout.prototype.setEdgeStyleEnabled = function(edge,
value)

Disables or enables the edge style of the given edge.

setOrthogonalEdge

mxGraphLayout.prototype.setOrthogonalEdge = function(edge,
value)

Disables or enables orthogonal end segments of the given edge.

getParentOffset

mxGraphLayout.prototype.getParentOffset = function(parent)

Determines the offset of the given parent to the parent of the layout

setEdgePoints

mxGraphLayout.prototype.setEdgePoints = function(edge,
points)

Replaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.

setVertexLocation

mxGraphLayout.prototype.setVertexLocation = function(cell,
x,
y)

Sets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true.  The change is only carried out if the new location is not equal to the existing location, otherwise the geometry is not replaced with an updated instance.  The new or old bounds are returned (including overlapping labels).

Parameters

cellmxCell whose geometry is to be set.
xInteger that defines the x-coordinate of the new location.
yInteger that defines the y-coordinate of the new location.

getVertexBounds

mxGraphLayout.prototype.getVertexBounds = function(cell)

Returns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.

arrangeGroups

mxGraphLayout.prototype.arrangeGroups = function(cells,
border,
topBorder,
rightBorder,
bottomBorder,
leftBorder)

Shortcut to mxGraph.updateGroupBounds with moveGroup set to true.

WeightedCellSorter

A utility class used to track cells whilst sorting occurs on the weighted sum of their connected edges.  Does not violate (x.compareTo(y)==0) == (x.equals(y))

Summary
Functions
WeightedCellSorterConstructs a new weighted cell sorted for the given cell and weight.
Variables
weightedValueThe weighted value of the cell stored.
nudgeWhether or not to flip equal weight values.
visitedWhether or not this cell has been visited in the current assignment.
rankIndexThe index this cell is in the model rank.
cellThe cell whose median value is being calculated.
Functions
compareCompares two WeightedCellSorters.

Functions

WeightedCellSorter

function WeightedCellSorter(cell,
weightedValue)

Constructs a new weighted cell sorted for the given cell and weight.

Variables

weightedValue

WeightedCellSorter.prototype.weightedValue

The weighted value of the cell stored.

nudge

WeightedCellSorter.prototype.nudge

Whether or not to flip equal weight values.

visited

WeightedCellSorter.prototype.visited

Whether or not this cell has been visited in the current assignment.

rankIndex

WeightedCellSorter.prototype.rankIndex

The index this cell is in the model rank.

cell

WeightedCellSorter.prototype.cell

The cell whose median value is being calculated.

Functions

compare

WeightedCellSorter.prototype.compare = function(a,
b)

Compares two WeightedCellSorters.

mxStackLayout

Extends mxGraphLayout to create a horizontal or vertical stack of the child vertices.  The children do not need to be connected for this layout to work.

Example

var layout = new mxStackLayout(graph, true);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxStackLayoutConstructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontalSpecifies the orientation of the layout.
spacingSpecifies the spacing between the cells.
x0Specifies the horizontal origin of the layout.
y0Specifies the vertical origin of the layout.
borderBorder to be added if fill is true.
marginTopTop margin for the child area.
marginLeftTop margin for the child area.
marginRightTop margin for the child area.
marginBottomTop margin for the child area.
keepFirstLocationBoolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.
fillBoolean indicating if dimension should be changed to fill out the parent cell.
resizeParentIf the parent should be resized to match the width/height of the stack.
resizeParentMaxUse maximum of existing value and new value for resize of parent.
resizeLastIf the last element should be resized to fill out the parent.
wrapValue at which a new column or row should be created.
borderCollapseIf the strokeWidth should be ignored.
allowGapsIf gaps should be allowed in the stack.
gridSizeGrid size for alignment of position and size.
Functions
isHorizontalReturns horizontal.
moveCellImplements mxGraphLayout.moveCell.
getParentSizeReturns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.
getLayoutCellsReturns the cells to be layouted.
snapSnaps the given value to the grid size.
executeImplements mxGraphLayout.execute.
executeImplements mxGraphLayout.execute.
executeImplements mxGraphLayout.execute.

Functions

mxStackLayout

function mxStackLayout(graph,
horizontal,
spacing,
x0,
y0,
border)

Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.

Variables

horizontal

mxStackLayout.prototype.horizontal

Specifies the orientation of the layout.  Default is true.

spacing

mxStackLayout.prototype.spacing

Specifies the spacing between the cells.  Default is 0.

x0

mxStackLayout.prototype.x0

Specifies the horizontal origin of the layout.  Default is 0.

y0

mxStackLayout.prototype.y0

Specifies the vertical origin of the layout.  Default is 0.

border

mxStackLayout.prototype.border

Border to be added if fill is true.  Default is 0.

marginTop

mxStackLayout.prototype.marginTop

Top margin for the child area.  Default is 0.

marginLeft

mxStackLayout.prototype.marginLeft

Top margin for the child area.  Default is 0.

marginRight

mxStackLayout.prototype.marginRight

Top margin for the child area.  Default is 0.

marginBottom

mxStackLayout.prototype.marginBottom

Top margin for the child area.  Default is 0.

keepFirstLocation

mxStackLayout.prototype.keepFirstLocation

Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.

fill

mxStackLayout.prototype.fill

Boolean indicating if dimension should be changed to fill out the parent cell.  Default is false.

resizeParent

mxStackLayout.prototype.resizeParent

If the parent should be resized to match the width/height of the stack.  Default is false.

resizeParentMax

mxStackLayout.prototype.resizeParentMax

Use maximum of existing value and new value for resize of parent.  Default is false.

resizeLast

mxStackLayout.prototype.resizeLast

If the last element should be resized to fill out the parent.  Default is false.  If resizeParent is true then this is ignored.

wrap

mxStackLayout.prototype.wrap

Value at which a new column or row should be created.  Default is null.

borderCollapse

mxStackLayout.prototype.borderCollapse

If the strokeWidth should be ignored.  Default is true.

allowGaps

mxStackLayout.prototype.allowGaps

If gaps should be allowed in the stack.  Default is false.

gridSize

mxStackLayout.prototype.gridSize

Grid size for alignment of position and size.  Default is 0.

Functions

isHorizontal

mxStackLayout.prototype.isHorizontal = function()

Returns horizontal.

moveCell

mxStackLayout.prototype.moveCell = function(cell,
x,
y)

Implements mxGraphLayout.moveCell.

getParentSize

mxStackLayout.prototype.getParentSize = function(parent)

Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.

getLayoutCells

mxStackLayout.prototype.getLayoutCells = function(parent)

Returns the cells to be layouted.

snap

mxStackLayout.prototype.snap = function(value)

Snaps the given value to the grid size.

execute

mxStackLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute.

Only children where <isVertexIgnored> returns false are taken into account.

execute

Implements mxGraphLayout.execute.

Only children where <isVertexIgnored> returns false are taken into account.

execute

Implements mxGraphLayout.execute.

Only children where <isVertexIgnored> returns false are taken into account.

mxPartitionLayout

Extends mxGraphLayout for partitioning the parent cell vertically or horizontally by filling the complete area with the child cells.  A horizontal layout partitions the height of the given parent whereas a a non-horizontal layout partitions the width.  If the parent is a layer (that is, a child of the root node), then the current graph size is partitioned.  The children do not need to be connected for this layout to work.

Example

var layout = new mxPartitionLayout(graph, true, 10, 20);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxPartitionLayoutConstructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontalBoolean indicating the direction in which the space is partitioned.
spacingInteger that specifies the absolute spacing in pixels between the children.
borderInteger that specifies the absolute inset in pixels for the parent that contains the children.
resizeVerticesBoolean that specifies if vertices should be resized.
Functions
isHorizontalReturns horizontal.
moveCellImplements mxGraphLayout.moveCell.
executeImplements mxGraphLayout.execute.

Functions

mxPartitionLayout

function mxPartitionLayout(graph,
horizontal,
spacing,
border)

Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.

Variables

horizontal

mxPartitionLayout.prototype.horizontal

Boolean indicating the direction in which the space is partitioned.  Default is true.

spacing

mxPartitionLayout.prototype.spacing

Integer that specifies the absolute spacing in pixels between the children.  Default is 0.

border

mxPartitionLayout.prototype.border

Integer that specifies the absolute inset in pixels for the parent that contains the children.  Default is 0.

resizeVertices

mxPartitionLayout.prototype.resizeVertices

Boolean that specifies if vertices should be resized.  Default is true.

Functions

isHorizontal

mxPartitionLayout.prototype.isHorizontal = function()

Returns horizontal.

moveCell

mxPartitionLayout.prototype.moveCell = function(cell,
x,
y)

Implements mxGraphLayout.moveCell.

execute

mxPartitionLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute.  All children where <isVertexIgnored> returns false and <isVertexMovable> returns true are modified.

mxCompactTreeLayout

Extends mxGraphLayout to implement a compact tree (Moen) algorithm.  This layout is suitable for graphs that have no cycles (trees).  Vertices that are not connected to the tree will be ignored by this layout.

Example

var layout = new mxCompactTreeLayout(graph);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxCompactTreeLayoutConstructs a new compact tree layout for the specified graph and orientation.
Variables
horizontalSpecifies the orientation of the layout.
invertSpecifies if edge directions should be inverted.
resizeParentIf the parents should be resized to match the width/height of the children.
maintainParentLocationSpecifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
groupPaddingPadding added to resized parents.
groupPaddingTopTop padding added to resized parents.
groupPaddingRightRight padding added to resized parents.
groupPaddingBottomBottom padding added to resized parents.
groupPaddingLeftLeft padding added to resized parents.
parentsChangedA set of the parents that need updating based on children process as part of the layout.
moveTreeSpecifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
visitedSpecifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
levelDistanceHolds the levelDistance.
nodeDistanceHolds the nodeDistance.
resetEdgesSpecifies if all edge points of traversed edges should be removed.
prefHozEdgeSepThe preferred horizontal distance between edges exiting a vertex.
prefVertEdgeOffThe preferred vertical offset between edges exiting a vertex.
minEdgeJettyThe minimum distance for an edge jetty from a vertex.
channelBufferThe size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.
edgeRoutingWhether or not to apply the internal tree edge routing.
sortEdgesSpecifies if edges should be sorted according to the order of their opposite terminal cell in the model.
alignRanksWhether or not the tops of cells in each rank should be aligned across the rank
maxRankHeightAn array of the maximum height of cells (relative to the layout direction) per rank
rootThe cell to use as the root of the tree
nodeThe internal node representation of the root cell.
Functions
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored as a vertex.
isHorizontalReturns horizontal.
executeImplements mxGraphLayout.execute.
moveNodeMoves the specified node and all of its children by the given amount.
sortOutgoingEdgesCalled if sortEdges is true to sort the array of outgoing edges in place.
findRankHeightsStores the maximum height (relative to the layout direction) of cells in each rank
setCellHeightsSet the cells heights (relative to the layout direction) when the tops of each rank are to be aligned
dfsDoes a depth first search starting at the specified cell.
layoutStarts the actual compact tree layout algorithm at the given node.
horizontalLayout
verticalLayout
attachParent
layoutLeaf
join
merge
offset
bridge
createNode
apply
createLine
adjustParentsAdjust parent cells whose child geometries have changed.
localEdgeProcessingMoves the specified node and all of its children by the given amount.
localEdgeProcessingSeparates the x position of edges as they connect to vertices

Functions

mxCompactTreeLayout

function mxCompactTreeLayout(graph,
horizontal,
invert)

Constructs a new compact tree layout for the specified graph and orientation.

Variables

horizontal

mxCompactTreeLayout.prototype.horizontal

Specifies the orientation of the layout.  Default is true.

invert

mxCompactTreeLayout.prototype.invert

Specifies if edge directions should be inverted.  Default is false.

resizeParent

mxCompactTreeLayout.prototype.resizeParent

If the parents should be resized to match the width/height of the children.  Default is true.

maintainParentLocation

mxCompactTreeLayout.prototype.maintainParentLocation

Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.  Default is false for backwards compatibility.

groupPadding

mxCompactTreeLayout.prototype.groupPadding

Padding added to resized parents.  Default is 10.

groupPaddingTop

mxCompactTreeLayout.prototype.groupPaddingTop

Top padding added to resized parents.  Default is 0.

groupPaddingRight

mxCompactTreeLayout.prototype.groupPaddingRight

Right padding added to resized parents.  Default is 0.

groupPaddingBottom

mxCompactTreeLayout.prototype.groupPaddingBottom

Bottom padding added to resized parents.  Default is 0.

groupPaddingLeft

mxCompactTreeLayout.prototype.groupPaddingLeft

Left padding added to resized parents.  Default is 0.

parentsChanged

mxCompactTreeLayout.prototype.parentsChanged

A set of the parents that need updating based on children process as part of the layout.

moveTree

mxCompactTreeLayout.prototype.moveTree

Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.  Default is false.

visited

mxCompactTreeLayout.prototype.visited

Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.  Default is false.

levelDistance

mxCompactTreeLayout.prototype.levelDistance

Holds the levelDistance.  Default is 10.

nodeDistance

mxCompactTreeLayout.prototype.nodeDistance

Holds the nodeDistance.  Default is 20.

resetEdges

mxCompactTreeLayout.prototype.resetEdges

Specifies if all edge points of traversed edges should be removed.  Default is true.

prefHozEdgeSep

mxCompactTreeLayout.prototype.prefHozEdgeSep

The preferred horizontal distance between edges exiting a vertex.

prefVertEdgeOff

mxCompactTreeLayout.prototype.prefVertEdgeOff

The preferred vertical offset between edges exiting a vertex.

minEdgeJetty

mxCompactTreeLayout.prototype.minEdgeJetty

The minimum distance for an edge jetty from a vertex.

channelBuffer

mxCompactTreeLayout.prototype.channelBuffer

The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.

edgeRouting

mxCompactTreeLayout.prototype.edgeRouting

Whether or not to apply the internal tree edge routing.

sortEdges

mxCompactTreeLayout.prototype.sortEdges

Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.

alignRanks

mxCompactTreeLayout.prototype.alignRanks

Whether or not the tops of cells in each rank should be aligned across the rank

maxRankHeight

mxCompactTreeLayout.prototype.maxRankHeight

An array of the maximum height of cells (relative to the layout direction) per rank

root

mxCompactTreeLayout.prototype.root

The cell to use as the root of the tree

node

mxCompactTreeLayout.prototype.node

The internal node representation of the root cell.  Do not set directly , this value is only exposed to assist with post-processing functionality

Functions

isVertexIgnored

mxCompactTreeLayout.prototype.isVertexIgnored = function(vertex)

Returns a boolean indicating if the given mxCell should be ignored as a vertex.  This returns true if the cell has no connections.

Parameters

vertexmxCell whose ignored state should be returned.

isHorizontal

mxCompactTreeLayout.prototype.isHorizontal = function()

Returns horizontal.

execute

mxCompactTreeLayout.prototype.execute = function(parent,
root)

Implements mxGraphLayout.execute.

If the parent has any connected edges, then it is used as the root of the tree.  Else, mxGraph.findTreeRoots will be used to find a suitable root node within the set of children of the given parent.

Parameters

parentmxCell whose children should be laid out.
rootOptional mxCell that will be used as the root of the tree.  Overrides root if specified.

moveNode

mxCompactTreeLayout.prototype.moveNode = function(node,
dx,
dy)

Moves the specified node and all of its children by the given amount.

sortOutgoingEdges

mxCompactTreeLayout.prototype.sortOutgoingEdges = function(source,
edges)

Called if sortEdges is true to sort the array of outgoing edges in place.

findRankHeights

mxCompactTreeLayout.prototype.findRankHeights = function(node,
rank)

Stores the maximum height (relative to the layout direction) of cells in each rank

setCellHeights

mxCompactTreeLayout.prototype.setCellHeights = function(node,
rank)

Set the cells heights (relative to the layout direction) when the tops of each rank are to be aligned

dfs

mxCompactTreeLayout.prototype.dfs = function(cell,
parent)

Does a depth first search starting at the specified cell.  Makes sure the specified parent is never left by the algorithm.

layout

mxCompactTreeLayout.prototype.layout = function(node)

Starts the actual compact tree layout algorithm at the given node.

horizontalLayout

mxCompactTreeLayout.prototype.horizontalLayout = function(node,
x0,
y0,
bounds)

verticalLayout

mxCompactTreeLayout.prototype.verticalLayout = function(node,
parent,
x0,
y0,
bounds)

attachParent

mxCompactTreeLayout.prototype.attachParent = function(node,
height)

layoutLeaf

mxCompactTreeLayout.prototype.layoutLeaf = function(node)

join

mxCompactTreeLayout.prototype.join = function(node)

merge

mxCompactTreeLayout.prototype.merge = function(p1,
p2)

offset

mxCompactTreeLayout.prototype.offset = function(p1,
p2,
a1,
a2,
b1,
b2)

bridge

mxCompactTreeLayout.prototype.bridge = function(line1,
x1,
y1,
line2,
x2,
y2)

createNode

mxCompactTreeLayout.prototype.createNode = function(cell)

apply

mxCompactTreeLayout.prototype.apply = function(node,
bounds)

createLine

mxCompactTreeLayout.prototype.createLine = function(dx,
dy,
next)

adjustParents

mxCompactTreeLayout.prototype.adjustParents = function()

Adjust parent cells whose child geometries have changed.  The default implementation adjusts the group to just fit around the children with a padding.

localEdgeProcessing

mxCompactTreeLayout.prototype.localEdgeProcessing = function(node)

Moves the specified node and all of its children by the given amount.

localEdgeProcessing

Separates the x position of edges as they connect to vertices

mxRadialTreeLayout

Extends mxGraphLayout to implement a radial tree algorithm.  This layout is suitable for graphs that have no cycles (trees).  Vertices that are not connected to the tree will be ignored by this layout.

Example

var layout = new mxRadialTreeLayout(graph);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxRadialTreeLayoutConstructs a new radial tree layout for the specified graph
Variables
angleOffsetThe initial offset to compute the angle position.
rootxThe X co-ordinate of the root cell
rootyThe Y co-ordinate of the root cell
levelDistanceHolds the levelDistance.
nodeDistanceHolds the nodeDistance.
autoRadiusSpecifies if the radios should be computed automatically
sortEdgesSpecifies if edges should be sorted according to the order of their opposite terminal cell in the model.
rowMinXArray of leftmost x coordinate of each row
rowMaxXArray of rightmost x coordinate of each row
rowMinCenXArray of x coordinate of leftmost vertex of each row
rowMaxCenXArray of x coordinate of rightmost vertex of each row
rowRadiArray of y deltas of each row behind root vertex, also the radius in the tree
rowArray of vertices on each row
Functions
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored as a vertex.
executeImplements mxGraphLayout.execute.
calcRowDimsRecursive function to calculate the dimensions of each row

Functions

mxRadialTreeLayout

function mxRadialTreeLayout(graph)

Constructs a new radial tree layout for the specified graph

Variables

angleOffset

mxRadialTreeLayout.prototype.angleOffset

The initial offset to compute the angle position.

rootx

mxRadialTreeLayout.prototype.rootx

The X co-ordinate of the root cell

rooty

mxRadialTreeLayout.prototype.rooty

The Y co-ordinate of the root cell

levelDistance

mxRadialTreeLayout.prototype.levelDistance

Holds the levelDistance.  Default is 120.

nodeDistance

mxRadialTreeLayout.prototype.nodeDistance

Holds the nodeDistance.  Default is 10.

autoRadius

mxRadialTreeLayout.prototype.autoRadius

Specifies if the radios should be computed automatically

sortEdges

mxRadialTreeLayout.prototype.sortEdges

Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.

rowMinX

mxRadialTreeLayout.prototype.rowMinX

Array of leftmost x coordinate of each row

rowMaxX

mxRadialTreeLayout.prototype.rowMaxX

Array of rightmost x coordinate of each row

rowMinCenX

mxRadialTreeLayout.prototype.rowMinCenX

Array of x coordinate of leftmost vertex of each row

rowMaxCenX

mxRadialTreeLayout.prototype.rowMaxCenX

Array of x coordinate of rightmost vertex of each row

rowRadi

mxRadialTreeLayout.prototype.rowRadi

Array of y deltas of each row behind root vertex, also the radius in the tree

row

mxRadialTreeLayout.prototype.row

Array of vertices on each row

Functions

isVertexIgnored

mxRadialTreeLayout.prototype.isVertexIgnored = function(vertex)

Returns a boolean indicating if the given mxCell should be ignored as a vertex.  This returns true if the cell has no connections.

Parameters

vertexmxCell whose ignored state should be returned.

execute

mxRadialTreeLayout.prototype.execute = function(parent,
root)

Implements mxGraphLayout.execute.

If the parent has any connected edges, then it is used as the root of the tree.  Else, mxGraph.findTreeRoots will be used to find a suitable root node within the set of children of the given parent.

Parameters

parentmxCell whose children should be laid out.
rootOptional mxCell that will be used as the root of the tree.

calcRowDims

mxRadialTreeLayout.prototype.calcRowDims = function(row,
rowNum)

Recursive function to calculate the dimensions of each row

Parameters

rowArray of internal nodes, the children of which are to be processed.
rowNumInteger indicating which row is being processed.

mxFastOrganicLayout

Extends mxGraphLayout to implement a fast organic layout algorithm.  The vertices need to be connected for this layout to work, vertices with no connections are ignored.

Example

var layout = new mxFastOrganicLayout(graph);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxCompactTreeLayoutConstructs a new fast organic layout for the specified graph.
Variables
useInputOriginSpecifies if the top left corner of the input cells should be the origin of the layout result.
resetEdgesSpecifies if all edge points of traversed edges should be removed.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
forceConstantThe force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.
forceConstantSquaredCache of <forceConstant>^2 for performance.
minDistanceLimitMinimal distance limit.
minDistanceLimitMinimal distance limit.
minDistanceLimitSquaredCached version of minDistanceLimit squared.
initialTempStart value of temperature.
temperatureTemperature to limit displacement at later stages of layout.
maxIterationsTotal number of iterations to run the layout though.
iterationCurrent iteration count.
vertexArrayAn array of all vertices to be laid out.
dispXAn array of locally stored X co-ordinate displacements for the vertices.
dispYAn array of locally stored Y co-ordinate displacements for the vertices.
cellLocationAn array of locally stored co-ordinate positions for the vertices.
radiusThe approximate radius of each cell, nodes only.
radiusSquaredThe approximate radius squared of each cell, nodes only.
isMoveableArray of booleans representing the movable states of the vertices.
neighboursLocal copy of cell neighbours.
indicesHashtable from cells to local indices.
allowedToRunBoolean flag that specifies if the layout is allowed to run.
Functions
isVertexIgnoredReturns a boolean indicating if the given mxCell should be ignored as a vertex.
executeImplements mxGraphLayout.execute.
calcPositionsTakes the displacements calculated for each cell and applies them to the local cache of cell positions.
calcAttractionCalculates the attractive forces between all laid out nodes linked by edges
calcRepulsionCalculates the repulsive forces between all laid out nodes
reduceTemperatureReduces the temperature of the layout from an initial setting in a linear fashion to zero.

Functions

mxCompactTreeLayout

Constructs a new fast organic layout for the specified graph.

Variables

useInputOrigin

mxFastOrganicLayout.prototype.useInputOrigin

Specifies if the top left corner of the input cells should be the origin of the layout result.  Default is true.

resetEdges

mxFastOrganicLayout.prototype.resetEdges

Specifies if all edge points of traversed edges should be removed.  Default is true.

disableEdgeStyle

mxFastOrganicLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.  Default is true.

forceConstant

mxFastOrganicLayout.prototype.forceConstant

The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.  The value equates to the average radius there is of free space around each node.  Default is 50.

forceConstantSquared

mxFastOrganicLayout.prototype.forceConstantSquared

Cache of <forceConstant>^2 for performance.

minDistanceLimit

mxFastOrganicLayout.prototype.minDistanceLimit

Minimal distance limit.  Default is 2.  Prevents of dividing by zero.

minDistanceLimit

Minimal distance limit.  Default is 2.  Prevents of dividing by zero.

minDistanceLimitSquared

mxFastOrganicLayout.prototype.minDistanceLimitSquared

Cached version of minDistanceLimit squared.

initialTemp

mxFastOrganicLayout.prototype.initialTemp

Start value of temperature.  Default is 200.

temperature

mxFastOrganicLayout.prototype.temperature

Temperature to limit displacement at later stages of layout.

maxIterations

mxFastOrganicLayout.prototype.maxIterations

Total number of iterations to run the layout though.

iteration

mxFastOrganicLayout.prototype.iteration

Current iteration count.

vertexArray

mxFastOrganicLayout.prototype.vertexArray

An array of all vertices to be laid out.

dispX

mxFastOrganicLayout.prototype.dispX

An array of locally stored X co-ordinate displacements for the vertices.

dispY

mxFastOrganicLayout.prototype.dispY

An array of locally stored Y co-ordinate displacements for the vertices.

cellLocation

mxFastOrganicLayout.prototype.cellLocation

An array of locally stored co-ordinate positions for the vertices.

radius

mxFastOrganicLayout.prototype.radius

The approximate radius of each cell, nodes only.

radiusSquared

mxFastOrganicLayout.prototype.radiusSquared

The approximate radius squared of each cell, nodes only.

isMoveable

mxFastOrganicLayout.prototype.isMoveable

Array of booleans representing the movable states of the vertices.

neighbours

mxFastOrganicLayout.prototype.neighbours

Local copy of cell neighbours.

indices

mxFastOrganicLayout.prototype.indices

Hashtable from cells to local indices.

allowedToRun

mxFastOrganicLayout.prototype.allowedToRun

Boolean flag that specifies if the layout is allowed to run.  If this is set to false, then the layout exits in the following iteration.

Functions

isVertexIgnored

mxFastOrganicLayout.prototype.isVertexIgnored = function(vertex)

Returns a boolean indicating if the given mxCell should be ignored as a vertex.  This returns true if the cell has no connections.

Parameters

vertexmxCell whose ignored state should be returned.

execute

mxFastOrganicLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute.  This operates on all children of the given parent where isVertexIgnored returns false.

calcPositions

mxFastOrganicLayout.prototype.calcPositions = function()

Takes the displacements calculated for each cell and applies them to the local cache of cell positions.  Limits the displacement to the current temperature.

calcAttraction

mxFastOrganicLayout.prototype.calcAttraction = function()

Calculates the attractive forces between all laid out nodes linked by edges

calcRepulsion

mxFastOrganicLayout.prototype.calcRepulsion = function()

Calculates the repulsive forces between all laid out nodes

reduceTemperature

mxFastOrganicLayout.prototype.reduceTemperature = function()

Reduces the temperature of the layout from an initial setting in a linear fashion to zero.

mxCircleLayout

Extends mxGraphLayout to implement a circluar layout for a given radius.  The vertices do not need to be connected for this layout to work and all connections between vertices are not taken into account.

Example

var layout = new mxCircleLayout(graph);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxCircleLayoutConstructs a new circular layout for the specified radius.
Variables
radiusInteger specifying the size of the radius.
moveCircleBoolean specifying if the circle should be moved to the top, left corner specified by x0 and y0.
x0Integer specifying the left coordinate of the circle.
y0Integer specifying the top coordinate of the circle.
resetEdgesSpecifies if all edge points of traversed edges should be removed.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
Functions
executeImplements mxGraphLayout.execute.
getRadiusReturns the radius to be used for the given vertex count.
circleExecutes the circular layout for the specified array of vertices and the given radius.

Functions

mxCircleLayout

function mxCircleLayout(graph,
radius)

Constructs a new circular layout for the specified radius.

Arguments

graphmxGraph that contains the cells.
radiusOptional radius as an int.  Default is 100.

Variables

radius

mxCircleLayout.prototype.radius

Integer specifying the size of the radius.  Default is 100.

moveCircle

mxCircleLayout.prototype.moveCircle

Boolean specifying if the circle should be moved to the top, left corner specified by x0 and y0.  Default is false.

x0

mxCircleLayout.prototype.x0

Integer specifying the left coordinate of the circle.  Default is 0.

y0

mxCircleLayout.prototype.y0

Integer specifying the top coordinate of the circle.  Default is 0.

resetEdges

mxCircleLayout.prototype.resetEdges

Specifies if all edge points of traversed edges should be removed.  Default is true.

disableEdgeStyle

mxCircleLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.  Default is true.

Functions

execute

mxCircleLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute.

getRadius

mxCircleLayout.prototype.getRadius = function(count,
max)

Returns the radius to be used for the given vertex count.  Max is the maximum width or height of all vertices in the layout.

circle

mxCircleLayout.prototype.circle = function(vertices,
r,
left,
top)

Executes the circular layout for the specified array of vertices and the given radius.  This is called from execute.

mxParallelEdgeLayout

Extends mxGraphLayout for arranging parallel edges.  This layout works on edges for all pairs of vertices where there is more than one edge connecting the latter.

Example

var layout = new mxParallelEdgeLayout(graph);
layout.execute(graph.getDefaultParent());

To run the layout for the parallel edges of a changed edge only, the following code can be used.

var layout = new mxParallelEdgeLayout(graph);

graph.addListener(mxEvent.CELL_CONNECTED, function(sender, evt)
{
  var model = graph.getModel();
  var edge = evt.getProperty('edge');
  var src = model.getTerminal(edge, true);
  var trg = model.getTerminal(edge, false);

  layout.isEdgeIgnored = function(edge2)
  {
    var src2 = model.getTerminal(edge2, true);
    var trg2 = model.getTerminal(edge2, false);

    return !(model.isEdge(edge2) && ((src == src2 && trg == trg2) || (src == trg2 && trg == src2)));
  };

  layout.execute(graph.getDefaultParent());
});
Summary
Functions
mxCompactTreeLayoutConstructs a new fast organic layout for the specified graph.
Variables
spacingDefines the spacing between the parallels.
Functions
executeImplements mxGraphLayout.execute.
findParallelsFinds the parallel edges in the given parent.
getEdgeIdReturns a unique ID for the given edge.
layoutLays out the parallel edges in the given array.
routeRoutes the given edge via the given point.

Functions

mxCompactTreeLayout

Constructs a new fast organic layout for the specified graph.

Variables

spacing

mxParallelEdgeLayout.prototype.spacing

Defines the spacing between the parallels.  Default is 20.

Functions

execute

mxParallelEdgeLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute.

findParallels

mxParallelEdgeLayout.prototype.findParallels = function(parent)

Finds the parallel edges in the given parent.

getEdgeId

mxParallelEdgeLayout.prototype.getEdgeId = function(edge)

Returns a unique ID for the given edge.  The id is independent of the edge direction and is built using the visible terminal of the given edge.

layout

mxParallelEdgeLayout.prototype.layout = function(parallels)

Lays out the parallel edges in the given array.

route

mxParallelEdgeLayout.prototype.route = function(edge,
x,
y)

Routes the given edge via the given point.

mxCompositeLayout

Allows to compose multiple layouts into a single layout.  The master layout is the layout that handles move operations if another layout than the first element in layouts should be used.  The <master> layout is not executed as the code assumes that it is part of layouts.

Example

var first = new mxFastOrganicLayout(graph);
var second = new mxParallelEdgeLayout(graph);
var layout = new mxCompositeLayout(graph, [first, second], first);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxCompositeLayoutConstructs a new layout using the given layouts.
Variables
layoutsHolds the array of mxGraphLayouts that this layout contains.
layoutsReference to the mxGraphLayouts that handles moves.
Functions
moveCellImplements mxGraphLayout.moveCell by calling move on <master> or the first layout in layouts.
executeImplements mxGraphLayout.execute by executing all layouts in a single transaction.

Functions

mxCompositeLayout

function mxCompositeLayout(graph,
layouts,
master)

Constructs a new layout using the given layouts.  The graph instance is required for creating the transaction that contains all layouts.

Arguments

graphReference to the enclosing mxGraph.
layoutsArray of mxGraphLayouts.
masterOptional layout that handles moves.  If no layout is given then the first layout of the above array is used to handle moves.

Variables

layouts

mxCompositeLayout.prototype.layouts

Holds the array of mxGraphLayouts that this layout contains.

layouts

Reference to the mxGraphLayouts that handles moves.  If this is null then the first layout in layouts is used.

Functions

moveCell

mxCompositeLayout.prototype.moveCell = function(cell,
x,
y)

Implements mxGraphLayout.moveCell by calling move on <master> or the first layout in layouts.

execute

mxCompositeLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute by executing all layouts in a single transaction.

mxEdgeLabelLayout

Extends mxGraphLayout to implement an edge label layout.  This layout makes use of cell states, which means the graph must be validated in a graph view (so that the label bounds are available) before this layout can be executed.

Example

var layout = new mxEdgeLabelLayout(graph);
layout.execute(graph.getDefaultParent());
Summary
Functions
mxEdgeLabelLayoutConstructs a new edge label layout.
executeImplements mxGraphLayout.execute.
placeLabelsPlaces the labels of the given edges.
avoidPlaces the labels of the given edges.

Functions

mxEdgeLabelLayout

function mxEdgeLabelLayout(graph,
radius)

Constructs a new edge label layout.

Arguments

graphmxGraph that contains the cells.

execute

mxEdgeLabelLayout.prototype.execute = function(parent)

Implements mxGraphLayout.execute.

placeLabels

mxEdgeLabelLayout.prototype.placeLabels = function(v,
e)

Places the labels of the given edges.

avoid

mxEdgeLabelLayout.prototype.avoid = function(edge,
vertex)

Places the labels of the given edges.

mxGraphAbstractHierarchyCell

An abstraction of an internal hierarchy node or edge

Summary
Functions
mxGraphAbstractHierarchyCellConstructs a new hierarchical layout algorithm.
Variables
maxRankThe maximum rank this cell occupies.
minRankThe minimum rank this cell occupies.
xThe x position of this cell for each layer it occupies
yThe y position of this cell for each layer it occupies
widthThe width of this cell
heightThe height of this cell
nextLayerConnectedCellsA cached version of the cells this cell connects to on the next layer up
previousLayerConnectedCellsA cached version of the cells this cell connects to on the next layer down
tempTemporary variable for general use.
Functions
getNextLayerConnectedCellsReturns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCellsReturns the cells this cell connects to on the next layer down
isEdgeReturns whether or not this cell is an edge
isVertexReturns whether or not this cell is a node
getGeneralPurposeVariableGets the value of temp for the specified layer
setGeneralPurposeVariableSet the value of temp for the specified layer
setXSet the value of x for the specified layer
getXGets the value of x on the specified layer
setYSet the value of y for the specified layer

Functions

mxGraphAbstractHierarchyCell

function mxGraphAbstractHierarchyCell()

Constructs a new hierarchical layout algorithm.

Arguments

graphReference to the enclosing mxGraph.
deterministicOptional boolean that specifies if this layout should be deterministic.  Default is true.

Variables

maxRank

mxGraphAbstractHierarchyCell.prototype.maxRank

The maximum rank this cell occupies.  Default is -1.

minRank

mxGraphAbstractHierarchyCell.prototype.minRank

The minimum rank this cell occupies.  Default is -1.

x

mxGraphAbstractHierarchyCell.prototype.x

The x position of this cell for each layer it occupies

y

mxGraphAbstractHierarchyCell.prototype.y

The y position of this cell for each layer it occupies

width

mxGraphAbstractHierarchyCell.prototype.width

The width of this cell

height

mxGraphAbstractHierarchyCell.prototype.height

The height of this cell

nextLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.nextLayerConnectedCells

A cached version of the cells this cell connects to on the next layer up

previousLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.previousLayerConnectedCells

A cached version of the cells this cell connects to on the next layer down

temp

mxGraphAbstractHierarchyCell.prototype.temp

Temporary variable for general use.  Generally, try to avoid carrying information between stages.  Currently, the longest path layering sets temp to the rank position in fixRanks() and the crossing reduction uses this.  This meant temp couldn’t be used for hashing the nodes in the model dfs and so hashCode was created

Functions

getNextLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.getNextLayerConnectedCells = function(
   layer
)

Returns the cells this cell connects to on the next layer up

getPreviousLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.getPreviousLayerConnectedCells = function(
   layer
)

Returns the cells this cell connects to on the next layer down

isEdge

mxGraphAbstractHierarchyCell.prototype.isEdge = function()

Returns whether or not this cell is an edge

isVertex

mxGraphAbstractHierarchyCell.prototype.isVertex = function()

Returns whether or not this cell is a node

getGeneralPurposeVariable

mxGraphAbstractHierarchyCell.prototype.getGeneralPurposeVariable = function(
   layer
)

Gets the value of temp for the specified layer

setGeneralPurposeVariable

mxGraphAbstractHierarchyCell.prototype.setGeneralPurposeVariable = function(
   layer,
   value
)

Set the value of temp for the specified layer

setX

mxGraphAbstractHierarchyCell.prototype.setX = function(layer,
value)

Set the value of x for the specified layer

getX

mxGraphAbstractHierarchyCell.prototype.getX = function(layer)

Gets the value of x on the specified layer

setY

mxGraphAbstractHierarchyCell.prototype.setY = function(layer,
value)

Set the value of y for the specified layer

mxGraphHierarchyNode

An abstraction of a hierarchical edge for the hierarchy layout

Summary
Functions
mxGraphHierarchyNodeConstructs an internal node to represent the specified real graph cell
Variables
cellThe graph cell this object represents.
idThe object identity of the wrapped cell
connectsAsTargetCollection of hierarchy edges that have this node as a target
connectsAsSourceCollection of hierarchy edges that have this node as a source
hashCodeAssigns a unique hashcode for each node.
Functions
getRankValueReturns the integer value of the layer that this node resides in
getNextLayerConnectedCellsReturns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCellsReturns the cells this cell connects to on the next layer down
isVertexReturns true.
getGeneralPurposeVariableGets the value of temp for the specified layer
setGeneralPurposeVariableSet the value of temp for the specified layer
isAncestor
getCoreCellGets the core vertex associated with this wrapper

Functions

mxGraphHierarchyNode

function mxGraphHierarchyNode(cell)

Constructs an internal node to represent the specified real graph cell

Arguments

cellthe real graph cell this node represents

Variables

cell

mxGraphHierarchyNode.prototype.cell

The graph cell this object represents.

id

mxGraphHierarchyNode.prototype.id

The object identity of the wrapped cell

connectsAsTarget

mxGraphHierarchyNode.prototype.connectsAsTarget

Collection of hierarchy edges that have this node as a target

connectsAsSource

mxGraphHierarchyNode.prototype.connectsAsSource

Collection of hierarchy edges that have this node as a source

hashCode

mxGraphHierarchyNode.prototype.hashCode

Assigns a unique hashcode for each node.  Used by the model dfs instead of copying HashSets

Functions

getRankValue

mxGraphHierarchyNode.prototype.getRankValue = function(layer)

Returns the integer value of the layer that this node resides in

getNextLayerConnectedCells

mxGraphHierarchyNode.prototype.getNextLayerConnectedCells = function(layer)

Returns the cells this cell connects to on the next layer up

getPreviousLayerConnectedCells

mxGraphHierarchyNode.prototype.getPreviousLayerConnectedCells = function(layer)

Returns the cells this cell connects to on the next layer down

isVertex

mxGraphHierarchyNode.prototype.isVertex = function()

Returns true.

getGeneralPurposeVariable

mxGraphHierarchyNode.prototype.getGeneralPurposeVariable = function(layer)

Gets the value of temp for the specified layer

setGeneralPurposeVariable

mxGraphHierarchyNode.prototype.setGeneralPurposeVariable = function(layer,
value)

Set the value of temp for the specified layer

isAncestor

mxGraphHierarchyNode.prototype.isAncestor = function(otherNode)

getCoreCell

mxGraphHierarchyNode.prototype.getCoreCell = function()

Gets the core vertex associated with this wrapper

mxGraphHierarchyEdge

An abstraction of a hierarchical edge for the hierarchy layout

Summary
Functions
mxGraphHierarchyEdgeConstructs a hierarchy edge
Variables
edgesThe graph edge(s) this object represents.
idsThe object identities of the wrapped cells
sourceThe node this edge is sourced at
targetThe node this edge targets
isReversedWhether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout
Functions
invertInverts the direction of this internal edge(s)
getNextLayerConnectedCellsReturns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCellsReturns the cells this cell connects to on the next layer down
isEdgeReturns true.
getGeneralPurposeVariableGets the value of temp for the specified layer
setGeneralPurposeVariableSet the value of temp for the specified layer
getCoreCellGets the first core edge associated with this wrapper

Functions

mxGraphHierarchyEdge

function mxGraphHierarchyEdge(edges)

Constructs a hierarchy edge

Arguments

edgesa list of real graph edges this abstraction represents

Variables

edges

mxGraphHierarchyEdge.prototype.edges

The graph edge(s) this object represents.  Parallel edges are all grouped together within one hierarchy edge.

ids

mxGraphHierarchyEdge.prototype.ids

The object identities of the wrapped cells

source

mxGraphHierarchyEdge.prototype.source

The node this edge is sourced at

target

mxGraphHierarchyEdge.prototype.target

The node this edge targets

isReversed

mxGraphHierarchyEdge.prototype.isReversed

Whether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout

Functions

invert

mxGraphHierarchyEdge.prototype.invert = function(layer)

Inverts the direction of this internal edge(s)

getNextLayerConnectedCells

mxGraphHierarchyEdge.prototype.getNextLayerConnectedCells = function(layer)

Returns the cells this cell connects to on the next layer up

getPreviousLayerConnectedCells

mxGraphHierarchyEdge.prototype.getPreviousLayerConnectedCells = function(layer)

Returns the cells this cell connects to on the next layer down

isEdge

mxGraphHierarchyEdge.prototype.isEdge = function()

Returns true.

getGeneralPurposeVariable

mxGraphHierarchyEdge.prototype.getGeneralPurposeVariable = function(layer)

Gets the value of temp for the specified layer

setGeneralPurposeVariable

mxGraphHierarchyEdge.prototype.setGeneralPurposeVariable = function(layer,
value)

Set the value of temp for the specified layer

getCoreCell

mxGraphHierarchyEdge.prototype.getCoreCell = function()

Gets the first core edge associated with this wrapper

mxGraphHierarchyModel

Internal model of a hierarchical graph.  This model stores nodes and edges equivalent to the real graph nodes and edges, but also stores the rank of the cells, the order within the ranks and the new candidate locations of cells.  The internal model also reverses edge direction were appropriate , ignores self-loop and groups parallels together under one edge object.

Summary
Functions
mxGraphHierarchyModelCreates an internal ordered graph model using the vertices passed in.
Variables
maxRankStores the largest rank number allocated
vertexMapperMap from graph vertices to internal model nodes.
edgeMapperMap from graph edges to internal model edges
ranksMapping from rank number to actual rank
rootsStore of roots of this hierarchy model, these are real graph cells, not internal cells
parentThe parent cell whose children are being laid out
dfsCountCount of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANKHigh value to start source layering scan rank value from.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
Functions
createInternalCellsCreates all edges in the internal model
initialRankBasic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
fixRanksFixes the layer assignments to the values stored in the nodes.
visitA depth first search through the internal heirarchy model.
dfsPerforms a depth first search on the internal hierarchy model
extendedDfsPerforms a depth first search on the internal hierarchy model.

Functions

mxGraphHierarchyModel

function mxGraphHierarchyModel(layout,
vertices,
roots,
parent,
tightenToSource)

Creates an internal ordered graph model using the vertices passed in.  If there are any, leftward edge need to be inverted in the internal model

Arguments

graphthe facade describing the graph to be operated on
verticesthe vertices for this hierarchy
orderedwhether or not the vertices are already ordered
deterministicwhether or not this layout should be deterministic on each
tightenToSourcewhether or not to tighten vertices towards the sources
scanRanksFromSinksWhether rank assignment is from the sinks or sources. usage

Variables

maxRank

mxGraphHierarchyModel.prototype.maxRank

Stores the largest rank number allocated

vertexMapper

mxGraphHierarchyModel.prototype.vertexMapper

Map from graph vertices to internal model nodes.

edgeMapper

mxGraphHierarchyModel.prototype.edgeMapper

Map from graph edges to internal model edges

ranks

mxGraphHierarchyModel.prototype.ranks

Mapping from rank number to actual rank

roots

mxGraphHierarchyModel.prototype.roots

Store of roots of this hierarchy model, these are real graph cells, not internal cells

parent

mxGraphHierarchyModel.prototype.parent

The parent cell whose children are being laid out

dfsCount

mxGraphHierarchyModel.prototype.dfsCount

Count of the number of times the ancestor dfs has been used.

SOURCESCANSTARTRANK

mxGraphHierarchyModel.prototype.SOURCESCANSTARTRANK

High value to start source layering scan rank value from.

tightenToSource

mxGraphHierarchyModel.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

Functions

createInternalCells

mxGraphHierarchyModel.prototype.createInternalCells = function(layout,
vertices,
internalVertices)

Creates all edges in the internal model

Parameters

layoutReference to the mxHierarchicalLayout algorithm.
verticesArray of mxCells that represent the vertices whom are to have an internal representation created.
internalVerticesThe array of mxGraphHierarchyNodes to have their information filled in using the real vertices.

initialRank

mxGraphHierarchyModel.prototype.initialRank = function()

Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.  Starting at the sinks is basically a longest path layering algorithm.

fixRanks

mxGraphHierarchyModel.prototype.fixRanks = function()

Fixes the layer assignments to the values stored in the nodes.  Also needs to create dummy nodes for edges that cross layers.

visit

mxGraphHierarchyModel.prototype.visit = function(visitor,
dfsRoots,
trackAncestors,
seenNodes)

A depth first search through the internal heirarchy model.

Parameters

visitorThe visitor function pattern to be called for each node.
trackAncestorsWhether or not the search is to keep track all nodes directly above this one in the search path.

dfs

mxGraphHierarchyModel.prototype.dfs = function(parent,
root,
connectingEdge,
visitor,
seen,
layer)

Performs a depth first search on the internal hierarchy model

Parameters

parentthe parent internal node of the current internal node
rootthe current internal node
connectingEdgethe internal edge connecting the internal node and the parent internal node, if any
visitorthe visitor pattern to be called for each node
seena set of all nodes seen by this dfs a set of all of the ancestor node of the current node
layerthe layer on the dfs tree ( not the same as the model ranks )

extendedDfs

mxGraphHierarchyModel.prototype.extendedDfs = function(parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer)

Performs a depth first search on the internal hierarchy model.  This dfs extends the default version by keeping track of cells ancestors, but it should be only used when necessary because of it can be computationally intensive for deep searches.

Parameters

parentthe parent internal node of the current internal node
rootthe current internal node
connectingEdgethe internal edge connecting the internal node and the parent internal node, if any
visitorthe visitor pattern to be called for each node
seena set of all nodes seen by this dfs
ancestorsthe parent hash code
childHashthe new hash code for this node
layerthe layer on the dfs tree ( not the same as the model ranks )

mxSwimlaneModel

Internal model of a hierarchical graph.  This model stores nodes and edges equivalent to the real graph nodes and edges, but also stores the rank of the cells, the order within the ranks and the new candidate locations of cells.  The internal model also reverses edge direction were appropriate , ignores self-loop and groups parallels together under one edge object.

Summary
Functions
mxSwimlaneModelCreates an internal ordered graph model using the vertices passed in.
Variables
maxRankStores the largest rank number allocated
vertexMapperMap from graph vertices to internal model nodes.
edgeMapperMap from graph edges to internal model edges
ranksMapping from rank number to actual rank
rootsStore of roots of this hierarchy model, these are real graph cells, not internal cells
parentThe parent cell whose children are being laid out
dfsCountCount of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANKHigh value to start source layering scan rank value from.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
ranksPerGroupAn array of the number of ranks within each swimlane
Functions
createInternalCellsCreates all edges in the internal model
initialRankBasic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
maxChainDfsPerforms a depth first search on the internal hierarchy model.
fixRanksFixes the layer assignments to the values stored in the nodes.
visitA depth first search through the internal heirarchy model.
dfsPerforms a depth first search on the internal hierarchy model
extendedDfsPerforms a depth first search on the internal hierarchy model.

Functions

mxSwimlaneModel

function mxSwimlaneModel(layout,
vertices,
roots,
parent,
tightenToSource)

Creates an internal ordered graph model using the vertices passed in.  If there are any, leftward edge need to be inverted in the internal model

Arguments

graphthe facade describing the graph to be operated on
verticesthe vertices for this hierarchy
orderedwhether or not the vertices are already ordered
deterministicwhether or not this layout should be deterministic on each
tightenToSourcewhether or not to tighten vertices towards the sources
scanRanksFromSinksWhether rank assignment is from the sinks or sources. usage

Variables

maxRank

mxSwimlaneModel.prototype.maxRank

Stores the largest rank number allocated

vertexMapper

mxSwimlaneModel.prototype.vertexMapper

Map from graph vertices to internal model nodes.

edgeMapper

mxSwimlaneModel.prototype.edgeMapper

Map from graph edges to internal model edges

ranks

mxSwimlaneModel.prototype.ranks

Mapping from rank number to actual rank

roots

mxSwimlaneModel.prototype.roots

Store of roots of this hierarchy model, these are real graph cells, not internal cells

parent

mxSwimlaneModel.prototype.parent

The parent cell whose children are being laid out

dfsCount

mxSwimlaneModel.prototype.dfsCount

Count of the number of times the ancestor dfs has been used.

SOURCESCANSTARTRANK

mxSwimlaneModel.prototype.SOURCESCANSTARTRANK

High value to start source layering scan rank value from.

tightenToSource

mxSwimlaneModel.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

ranksPerGroup

mxSwimlaneModel.prototype.ranksPerGroup

An array of the number of ranks within each swimlane

Functions

createInternalCells

mxSwimlaneModel.prototype.createInternalCells = function(layout,
vertices,
internalVertices)

Creates all edges in the internal model

Parameters

layoutReference to the mxHierarchicalLayout algorithm.
verticesArray of mxCells that represent the vertices whom are to have an internal representation created.
internalVerticesThe array of mxGraphHierarchyNodes to have their information filled in using the real vertices.

initialRank

mxSwimlaneModel.prototype.initialRank = function()

Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.  Starting at the sinks is basically a longest path layering algorithm.

maxChainDfs

mxSwimlaneModel.prototype.maxChainDfs = function(parent,
root,
connectingEdge,
seen,
chainCount)

Performs a depth first search on the internal hierarchy model.  This dfs extends the default version by keeping track of chains within groups.  Any cycles should be removed prior to running, but previously seen cells are ignored.

Parameters

parentthe parent internal node of the current internal node
rootthe current internal node
connectingEdgethe internal edge connecting the internal node and the parent internal node, if any
seena set of all nodes seen by this dfs
chainCountthe number of edges in the chain of vertices going through the current swimlane

fixRanks

mxSwimlaneModel.prototype.fixRanks = function()

Fixes the layer assignments to the values stored in the nodes.  Also needs to create dummy nodes for edges that cross layers.

visit

mxSwimlaneModel.prototype.visit = function(visitor,
dfsRoots,
trackAncestors,
seenNodes)

A depth first search through the internal heirarchy model.

Parameters

visitorThe visitor function pattern to be called for each node.
trackAncestorsWhether or not the search is to keep track all nodes directly above this one in the search path.

dfs

mxSwimlaneModel.prototype.dfs = function(parent,
root,
connectingEdge,
visitor,
seen,
layer)

Performs a depth first search on the internal hierarchy model

Parameters

parentthe parent internal node of the current internal node
rootthe current internal node
connectingEdgethe internal edge connecting the internal node and the parent internal node, if any
visitorthe visitor pattern to be called for each node
seena set of all nodes seen by this dfs a set of all of the ancestor node of the current node
layerthe layer on the dfs tree ( not the same as the model ranks )

extendedDfs

mxSwimlaneModel.prototype.extendedDfs = function(parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer)

Performs a depth first search on the internal hierarchy model.  This dfs extends the default version by keeping track of cells ancestors, but it should be only used when necessary because of it can be computationally intensive for deep searches.

Parameters

parentthe parent internal node of the current internal node
rootthe current internal node
connectingEdgethe internal edge connecting the internal node and the parent internal node, if any
visitorthe visitor pattern to be called for each node
seena set of all nodes seen by this dfs
ancestorsthe parent hash code
childHashthe new hash code for this node
layerthe layer on the dfs tree ( not the same as the model ranks )

mxHierarchicalLayoutStage

The specific layout interface for hierarchical layouts.  It adds a <code>run</code> method with a parameter for the hierarchical layout model that is shared between the layout stages.

Summary
Functions
mxHierarchicalLayoutStageConstructs a new hierarchical layout stage.
executeTakes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

Functions

mxHierarchicalLayoutStage

function mxHierarchicalLayoutStage()

Constructs a new hierarchical layout stage.

execute

mxHierarchicalLayoutStage.prototype.execute = function(parent)

Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

mxMedianHybridCrossingReduction

Sets the horizontal locations of node and edge dummy nodes on each layer.  Uses median down and up weighings as well heuristic to straighten edges as far as possible.

Summary
Functions
mxMedianHybridCrossingReductionCreates a coordinate assignment.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
maxIterationsThe maximum number of iterations to perform whilst reducing edge crossings.
nestedBestRanksStores each rank as a collection of cells in the best order found for each layer so far
currentBestCrossingsThe total number of crossings found in the best configuration so far
iterationsWithoutImprovementThe total number of crossings found in the best configuration so far
maxNoImprovementIterationsThe total number of crossings found in the best configuration so far
Functions
executePerforms a vertex ordering within ranks as described by Gansner et al 1993
calculateCrossingsCalculates the total number of edge crossing in the current graph.
calculateRankCrossingCalculates the number of edges crossings between the specified rank and the rank below it.
transposeTakes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing
weightedMedianSweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks
medianRankAttempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks
medianValueCalculates the median rank order positioning for the specified cell using the connected cells on the specified rank.

Functions

mxMedianHybridCrossingReduction

function mxMedianHybridCrossingReduction(layout)

Creates a coordinate assignment.

Arguments

intraCellSpacingthe minimum buffer between cells on the same rank
interRankCellSpacingthe minimum distance between cells on adjacent ranks
orientationthe position of the root node(s) relative to the graph
initialXthe leftmost coordinate node placement starts at

Variables

layout

mxMedianHybridCrossingReduction.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

maxIterations

mxMedianHybridCrossingReduction.prototype.maxIterations

The maximum number of iterations to perform whilst reducing edge crossings.  Default is 24.

nestedBestRanks

mxMedianHybridCrossingReduction.prototype.nestedBestRanks

Stores each rank as a collection of cells in the best order found for each layer so far

currentBestCrossings

mxMedianHybridCrossingReduction.prototype.currentBestCrossings

The total number of crossings found in the best configuration so far

iterationsWithoutImprovement

mxMedianHybridCrossingReduction.prototype.iterationsWithoutImprovement

The total number of crossings found in the best configuration so far

maxNoImprovementIterations

mxMedianHybridCrossingReduction.prototype.maxNoImprovementIterations

The total number of crossings found in the best configuration so far

Functions

execute

mxMedianHybridCrossingReduction.prototype.execute = function(parent)

Performs a vertex ordering within ranks as described by Gansner et al 1993

calculateCrossings

mxMedianHybridCrossingReduction.prototype.calculateCrossings = function(model)

Calculates the total number of edge crossing in the current graph.  Returns the current number of edge crossings in the hierarchy graph model in the current candidate layout

Parameters

modelthe internal model describing the hierarchy

calculateRankCrossing

mxMedianHybridCrossingReduction.prototype.calculateRankCrossing = function(
   i,
   model
)

Calculates the number of edges crossings between the specified rank and the rank below it.  Returns the number of edges crossings with the rank beneath

Parameters

ithe topmost rank of the pair ( higher rank value )
modelthe internal model describing the hierarchy

transpose

mxMedianHybridCrossingReduction.prototype.transpose = function(
   mainLoopIteration,
   model
)

Takes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing

Parameters

mainLoopIterationthe iteration number of the main loop
modelthe internal model describing the hierarchy

weightedMedian

mxMedianHybridCrossingReduction.prototype.weightedMedian = function(iteration,
model)

Sweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks

Parameters

iterationthe iteration number of the main loop
modelthe internal model describing the hierarchy

medianRank

mxMedianHybridCrossingReduction.prototype.medianRank = function(rankValue,
downwardSweep)

Attempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks

Parameters

rankValuethe layer number of this rank
downwardSweepwhether or not this is a downward sweep through the graph

medianValue

mxMedianHybridCrossingReduction.prototype.medianValue = function(
   connectedCells,
   rankValue
)

Calculates the median rank order positioning for the specified cell using the connected cells on the specified rank.  Returns the median rank ordering value of the connected cells

Parameters

connectedCellsthe cells on the specified rank connected to the specified cell
rankValuethe rank that the connected cell lie upon

MedianCellSorter

A utility class used to track cells whilst sorting occurs on the median values.  Does not violate (x.compareTo(y)==0) == (x.equals(y))

Summary
Functions
MedianCellSorterConstructs a new median cell sorter.
Variables
medianValueThe weighted value of the cell stored.
cellThe cell whose median value is being calculated
Functions
compareCompares two MedianCellSorters.

Functions

MedianCellSorter

function MedianCellSorter()

Constructs a new median cell sorter.

Variables

medianValue

MedianCellSorter.prototype.medianValue

The weighted value of the cell stored.

cell

MedianCellSorter.prototype.cell

The cell whose median value is being calculated

Functions

compare

MedianCellSorter.prototype.compare = function(a,
b)

Compares two MedianCellSorters.

mxMinimumCycleRemover

An implementation of the first stage of the Sugiyama layout.  Straightforward longest path calculation of layer assignment

Summary
Functions
mxMinimumCycleRemoverCreates a cycle remover for the given internal model.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
Functions
executeTakes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

Functions

mxMinimumCycleRemover

function mxMinimumCycleRemover(layout)

Creates a cycle remover for the given internal model.

Variables

layout

mxMinimumCycleRemover.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

Functions

execute

mxMinimumCycleRemover.prototype.execute = function(parent)

Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

mxCoordinateAssignment

Sets the horizontal locations of node and edge dummy nodes on each layer.  Uses median down and up weighings as well as heuristics to straighten edges as far as possible.

Summary
Functions
mxCoordinateAssignmentCreates a coordinate assignment.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
intraCellSpacingThe minimum buffer between cells on the same rank.
interRankCellSpacingThe minimum distance between cells on adjacent ranks.
parallelEdgeSpacingThe distance between each parallel edge on each ranks for long edges.
maxIterationsThe number of heuristic iterations to run.
prefHozEdgeSepThe preferred horizontal distance between edges exiting a vertex
prefVertEdgeOffThe preferred vertical offset between edges exiting a vertex
minEdgeJettyThe minimum distance for an edge jetty from a vertex
channelBufferThe size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed
jettyPositionsMap of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices.
orientationThe position of the root ( start ) node(s) relative to the rest of the laid out graph.
initialXThe minimum x position node placement starts at
limitXThe maximum x value this positioning lays up to
currentXDeltaThe sum of x-displacements for the current iteration
widestRankThe rank that has the widest x position
rankTopYInternal cache of top-most values of Y for each rank
rankBottomYInternal cache of bottom-most value of Y for each rank
widestRankValueThe X-coordinate of the edge of the widest rank
rankWidthsThe width of all the ranks
rankYThe Y-coordinate of all the ranks
fineTuningWhether or not to perform local optimisations and iterate multiple times through the algorithm.
nextLayerConnectedCacheA store of connections to the layer above for speed
previousLayerConnectedCacheA store of connections to the layer below for speed
groupPaddingPadding added to resized parents
Functions
executeA basic horizontal coordinate assignment algorithm
minNodePerforms one median positioning sweep in both directions
medianPosPerforms one median positioning sweep in one direction
rankMedianPositionPerforms median minimisation over one rank.
calculatedWeightedValueCalculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer
medianXValueCalculates the median position of the connected cell on the specified rank
initialCoordsSets up the layout in an initial positioning.
rankCoordinatesSets up the layout in an initial positioning.
calculateWidestRankCalculates the width rank in the hierarchy.
minPathStraightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.
repositionValidDetermines whether or not a node may be moved to the specified x position on the specified rank
setCellLocationsSets the cell locations in the facade to those stored after this layout processing step has completed.
localEdgeProcessingSeparates the x position of edges as they connect to vertices
setEdgePositionFixes the control points
setVertexLocationFixes the position of the specified vertex.
processReversedEdgeHook to add additional processing

Functions

mxCoordinateAssignment

function mxCoordinateAssignment(layout,
intraCellSpacing,
interRankCellSpacing,
orientation,
initialX,
parallelEdgeSpacing)

Creates a coordinate assignment.

Arguments

intraCellSpacingthe minimum buffer between cells on the same rank
interRankCellSpacingthe minimum distance between cells on adjacent ranks
orientationthe position of the root node(s) relative to the graph
initialXthe leftmost coordinate node placement starts at

Variables

layout

mxCoordinateAssignment.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

intraCellSpacing

mxCoordinateAssignment.prototype.intraCellSpacing

The minimum buffer between cells on the same rank.  Default is 30.

interRankCellSpacing

mxCoordinateAssignment.prototype.interRankCellSpacing

The minimum distance between cells on adjacent ranks.  Default is 10.

parallelEdgeSpacing

mxCoordinateAssignment.prototype.parallelEdgeSpacing

The distance between each parallel edge on each ranks for long edges.  Default is 10.

maxIterations

mxCoordinateAssignment.prototype.maxIterations

The number of heuristic iterations to run.  Default is 8.

prefHozEdgeSep

mxCoordinateAssignment.prototype.prefHozEdgeSep

The preferred horizontal distance between edges exiting a vertex

prefVertEdgeOff

mxCoordinateAssignment.prototype.prefVertEdgeOff

The preferred vertical offset between edges exiting a vertex

minEdgeJetty

mxCoordinateAssignment.prototype.minEdgeJetty

The minimum distance for an edge jetty from a vertex

channelBuffer

mxCoordinateAssignment.prototype.channelBuffer

The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed

jettyPositions

mxCoordinateAssignment.prototype.jettyPositions

Map of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices.  Note this should technically be a WeakHashMap, but since JS does not have an equivalent, housekeeping must be performed before using. i.e. check all edges are still in the model and clear the values.  Note that the y co-ord is the offset of the jetty, not the absolute point

orientation

mxCoordinateAssignment.prototype.orientation

The position of the root ( start ) node(s) relative to the rest of the laid out graph.  Default is mxConstants.DIRECTION_NORTH.

initialX

mxCoordinateAssignment.prototype.initialX

The minimum x position node placement starts at

limitX

mxCoordinateAssignment.prototype.limitX

The maximum x value this positioning lays up to

currentXDelta

mxCoordinateAssignment.prototype.currentXDelta

The sum of x-displacements for the current iteration

widestRank

mxCoordinateAssignment.prototype.widestRank

The rank that has the widest x position

rankTopY

mxCoordinateAssignment.prototype.rankTopY

Internal cache of top-most values of Y for each rank

rankBottomY

mxCoordinateAssignment.prototype.rankBottomY

Internal cache of bottom-most value of Y for each rank

widestRankValue

mxCoordinateAssignment.prototype.widestRankValue

The X-coordinate of the edge of the widest rank

rankWidths

mxCoordinateAssignment.prototype.rankWidths

The width of all the ranks

rankY

mxCoordinateAssignment.prototype.rankY

The Y-coordinate of all the ranks

fineTuning

mxCoordinateAssignment.prototype.fineTuning

Whether or not to perform local optimisations and iterate multiple times through the algorithm.  Default is true.

nextLayerConnectedCache

mxCoordinateAssignment.prototype.nextLayerConnectedCache

A store of connections to the layer above for speed

previousLayerConnectedCache

mxCoordinateAssignment.prototype.previousLayerConnectedCache

A store of connections to the layer below for speed

groupPadding

mxCoordinateAssignment.prototype.groupPadding

Padding added to resized parents

Functions

execute

mxCoordinateAssignment.prototype.execute = function(parent)

A basic horizontal coordinate assignment algorithm

minNode

mxCoordinateAssignment.prototype.minNode = function(model)

Performs one median positioning sweep in both directions

medianPos

mxCoordinateAssignment.prototype.medianPos = function(i,
model)

Performs one median positioning sweep in one direction

Parameters

ithe iteration of the whole process
modelan internal model of the hierarchical layout

rankMedianPosition

mxCoordinateAssignment.prototype.rankMedianPosition = function(rankValue,
model,
nextRankValue)

Performs median minimisation over one rank.

Parameters

rankValuethe layer number of this rank
modelan internal model of the hierarchical layout
nextRankValuethe layer number whose connected cels are to be laid out relative to

calculatedWeightedValue

mxCoordinateAssignment.prototype.calculatedWeightedValue = function(
   currentCell,
   collection
)

Calculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer

Parameters

currentCellthe cell whose weight is to be calculated
collectionthe cells the specified cell is connected to

medianXValue

mxCoordinateAssignment.prototype.medianXValue = function(connectedCells,
rankValue)

Calculates the median position of the connected cell on the specified rank

Parameters

connectedCellsthe cells the candidate connects to on this level
rankValuethe layer number of this rank

initialCoords

mxCoordinateAssignment.prototype.initialCoords = function(facade,
model)

Sets up the layout in an initial positioning.  The ranks are all centered as much as possible along the middle vertex in each rank.  The other cells are then placed as close as possible on either side.

Parameters

facadethe facade describing the input graph
modelan internal model of the hierarchical layout

rankCoordinates

mxCoordinateAssignment.prototype.rankCoordinates = function(rankValue,
graph,
model)

Sets up the layout in an initial positioning.  All the first cells in each rank are moved to the left and the rest of the rank inserted as close together as their size and buffering permits.  This method works on just the specified rank.

Parameters

rankValuethe current rank being processed
graphthe facade describing the input graph
modelan internal model of the hierarchical layout

calculateWidestRank

mxCoordinateAssignment.prototype.calculateWidestRank = function(graph,
model)

Calculates the width rank in the hierarchy.  Also set the y value of each rank whilst performing the calculation

Parameters

graphthe facade describing the input graph
modelan internal model of the hierarchical layout

minPath

mxCoordinateAssignment.prototype.minPath = function(graph,
model)

Straightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.

Parameters

graphthe facade describing the input graph
modelan internal model of the hierarchical layout

repositionValid

mxCoordinateAssignment.prototype.repositionValid = function(model,
cell,
rank,
position)

Determines whether or not a node may be moved to the specified x position on the specified rank

Parameters

modelthe layout model
cellthe cell being analysed
rankthe layer of the cell
positionthe x position being sought

setCellLocations

mxCoordinateAssignment.prototype.setCellLocations = function(graph,
model)

Sets the cell locations in the facade to those stored after this layout processing step has completed.

Parameters

graphthe input graph
modelthe layout model

localEdgeProcessing

mxCoordinateAssignment.prototype.localEdgeProcessing = function(model)

Separates the x position of edges as they connect to vertices

Parameters

modelthe layout model

setEdgePosition

mxCoordinateAssignment.prototype.setEdgePosition = function(cell)

Fixes the control points

setVertexLocation

mxCoordinateAssignment.prototype.setVertexLocation = function(cell)

Fixes the position of the specified vertex.

Parameters

cellthe vertex to position

processReversedEdge

mxCoordinateAssignment.prototype.processReversedEdge = function(graph,
model)

Hook to add additional processing

Parameters

edgethe hierarchical model edge
realEdgethe real edge in the graph

mxSwimlaneOrdering

An implementation of the first stage of the Sugiyama layout.  Straightforward longest path calculation of layer assignment

Summary
Functions
mxSwimlaneOrderingCreates a cycle remover for the given internal model.
Variables
layoutReference to the enclosing mxHierarchicalLayout.
Functions
executeTakes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

Functions

mxSwimlaneOrdering

function mxSwimlaneOrdering(layout)

Creates a cycle remover for the given internal model.

Variables

layout

mxSwimlaneOrdering.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

Functions

execute

mxSwimlaneOrdering.prototype.execute = function(parent)

Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

mxHierarchicalLayout

A hierarchical layout algorithm.

Summary
Functions
mxHierarchicalLayoutConstructs a new hierarchical layout algorithm.
Variables
rootsHolds the array of mxCell that this layout contains.
resizeParentSpecifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocationSpecifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParentSpecifies if the parent should be moved if resizeParent is enabled.
parentBorderThe border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacingThe spacing buffer added between cells on the same layer.
interRankCellSpacingThe spacing buffer added between cell on adjacent layers.
interHierarchySpacingThe spacing buffer between unconnected hierarchies.
parallelEdgeSpacingThe distance between each parallel edge on each ranks for long edges
orientationThe position of the root node(s) relative to the laid out graph in.
fineTuningWhether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestorsWhether or not to drill into child cells and layout in reverse group order.
modelThe internal mxGraphHierarchyModel formed of the layout.
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgeStyleThe style to apply between cell layers to edge segments
Functions
getModelReturns the internal mxGraphHierarchyModel for this layout algorithm.
executeExecutes the layout for the children of the specified parent.
findRootsReturns all visible children in the given parent which do not have incoming edges.
getEdgesReturns the connected edges for the given cell.
getVisibleTerminalHelper function to return visible terminal for edge allowing for ports
runThe API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendantsCreates an array of descendant cells
isPortReturns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetweenReturns the edges between the given source and target.
cycleStageExecutes the cycle stage using mxMinimumCycleRemover.
layeringStageImplements first stage of a Sugiyama layout.
crossingStageExecutes the crossing stage using mxMedianHybridCrossingReduction.
placementStageExecutes the placement stage using mxCoordinateAssignment.

Functions

mxHierarchicalLayout

function mxHierarchicalLayout(graph,
orientation,
deterministic)

Constructs a new hierarchical layout algorithm.

Arguments

graphReference to the enclosing mxGraph.
orientationOptional constant that defines the orientation of this layout.
deterministicOptional boolean that specifies if this layout should be deterministic.  Default is true.

Variables

roots

mxHierarchicalLayout.prototype.roots

Holds the array of mxCell that this layout contains.

resizeParent

mxHierarchicalLayout.prototype.resizeParent

Specifies if the parent should be resized after the layout so that it contains all the child cells.  Default is false.  See also parentBorder.

maintainParentLocation

mxHierarchicalLayout.prototype.maintainParentLocation

Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.  Default is false for backwards compatibility.

moveParent

mxHierarchicalLayout.prototype.moveParent

Specifies if the parent should be moved if resizeParent is enabled.  Default is false.

parentBorder

mxHierarchicalLayout.prototype.parentBorder

The border to be added around the children if the parent is to be resized using resizeParent.  Default is 0.

intraCellSpacing

mxHierarchicalLayout.prototype.intraCellSpacing

The spacing buffer added between cells on the same layer.  Default is 30.

interRankCellSpacing

mxHierarchicalLayout.prototype.interRankCellSpacing

The spacing buffer added between cell on adjacent layers.  Default is 50.

interHierarchySpacing

mxHierarchicalLayout.prototype.interHierarchySpacing

The spacing buffer between unconnected hierarchies.  Default is 60.

parallelEdgeSpacing

mxHierarchicalLayout.prototype.parallelEdgeSpacing

The distance between each parallel edge on each ranks for long edges

orientation

mxHierarchicalLayout.prototype.orientation

The position of the root node(s) relative to the laid out graph in.  Default is mxConstants.DIRECTION_NORTH.

fineTuning

mxHierarchicalLayout.prototype.fineTuning

Whether or not to perform local optimisations and iterate multiple times through the algorithm.  Default is true.

tightenToSource

mxHierarchicalLayout.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

disableEdgeStyle

mxHierarchicalLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.  Default is true.

traverseAncestors

mxHierarchicalLayout.prototype.traverseAncestors

Whether or not to drill into child cells and layout in reverse group order.  This also cause the layout to navigate edges whose terminal vertices have different parents but are in the same ancestry chain

model

mxHierarchicalLayout.prototype.model

The internal mxGraphHierarchyModel formed of the layout.

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgeStyle

mxHierarchicalLayout.prototype.edgeStyle

The style to apply between cell layers to edge segments

Functions

getModel

mxHierarchicalLayout.prototype.getModel = function()

Returns the internal mxGraphHierarchyModel for this layout algorithm.

execute

mxHierarchicalLayout.prototype.execute = function(parent,
roots)

Executes the layout for the children of the specified parent.

Parameters

parentParent mxCell that contains the children to be laid out.
rootsOptional starting roots of the layout.

findRoots

mxHierarchicalLayout.prototype.findRoots = function(parent,
vertices)

Returns all visible children in the given parent which do not have incoming edges.  If the result is empty then the children with the maximum difference between incoming and outgoing edges are returned.  This takes into account edges that are being promoted to the given root due to invisible children or collapsed cells.

Parameters

parentmxCell whose children should be checked.
verticesarray of vertices to limit search to

getEdges

mxHierarchicalLayout.prototype.getEdges = function(cell)

Returns the connected edges for the given cell.

Parameters

cellmxCell whose edges should be returned.

getVisibleTerminal

mxHierarchicalLayout.prototype.getVisibleTerminal = function(edge,
source)

Helper function to return visible terminal for edge allowing for ports

Parameters

edgemxCell whose edges should be returned.
sourceBoolean that specifies whether the source or target terminal is to be returned

run

mxHierarchicalLayout.prototype.run = function(parent)

The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.  It runs each stage of the layout that has been created.

filterDescendants

mxHierarchicalLayout.prototype.filterDescendants = function(cell,
result)

Creates an array of descendant cells

isPort

mxHierarchicalLayout.prototype.isPort = function(cell)

Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal

Parameters

cellmxCell that represents the port.

getEdgesBetween

mxHierarchicalLayout.prototype.getEdgesBetween = function(source,
target,
directed)

Returns the edges between the given source and target.  This takes into account collapsed and invisible cells and ports.

Parameters

source - target - directed -

cycleStage

mxHierarchicalLayout.prototype.cycleStage = function(parent)

Executes the cycle stage using mxMinimumCycleRemover.

layeringStage

mxHierarchicalLayout.prototype.layeringStage = function()

Implements first stage of a Sugiyama layout.

crossingStage

mxHierarchicalLayout.prototype.crossingStage = function(parent)

Executes the crossing stage using mxMedianHybridCrossingReduction.

placementStage

mxHierarchicalLayout.prototype.placementStage = function(initialX,
parent)

Executes the placement stage using mxCoordinateAssignment.

mxSwimlaneLayout

A hierarchical layout algorithm.

Summary
Functions
mxSwimlaneLayoutConstructs a new hierarchical layout algorithm.
Variables
rootsHolds the array of mxCell that this layout contains.
swimlanesHolds the array of mxCell of the ordered swimlanes to lay out
dummyVerticesHolds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes
dummyVertexWidthThe cell width of any dummy vertices inserted
resizeParentSpecifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocationSpecifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParentSpecifies if the parent should be moved if resizeParent is enabled.
parentBorderThe border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacingThe spacing buffer added between cells on the same layer.
interRankCellSpacingThe spacing buffer added between cell on adjacent layers.
interHierarchySpacingThe spacing buffer between unconnected hierarchies.
parallelEdgeSpacingThe distance between each parallel edge on each ranks for long edges
orientationThe position of the root node(s) relative to the laid out graph in.
fineTuningWhether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSourceWhether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyleSpecifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestorsWhether or not to drill into child cells and layout in reverse group order.
modelThe internal mxSwimlaneModel formed of the layout.
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgesSetA cache of edges whose source terminal is the key
edgeStyleThe style to apply between cell layers to edge segments
Functions
getModelReturns the internal mxSwimlaneModel for this layout algorithm.
executeExecutes the layout for the children of the specified parent.
updateGroupBoundsUpdates the bounds of the given array of groups so that it includes all child vertices.
findRootsReturns all visible children in the given parent which do not have incoming edges.
getEdgesReturns the connected edges for the given cell.
getVisibleTerminalHelper function to return visible terminal for edge allowing for ports
runThe API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendantsCreates an array of descendant cells
isPortReturns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetweenReturns the edges between the given source and target.
cycleStageExecutes the cycle stage using mxMinimumCycleRemover.
layeringStageImplements first stage of a Sugiyama layout.
crossingStageExecutes the crossing stage using mxMedianHybridCrossingReduction.
placementStageExecutes the placement stage using mxCoordinateAssignment.

Functions

mxSwimlaneLayout

function mxSwimlaneLayout(graph,
orientation,
deterministic)

Constructs a new hierarchical layout algorithm.

Arguments

graphReference to the enclosing mxGraph.
orientationOptional constant that defines the orientation of this layout.
deterministicOptional boolean that specifies if this layout should be deterministic.  Default is true.

Variables

roots

mxSwimlaneLayout.prototype.roots

Holds the array of mxCell that this layout contains.

swimlanes

mxSwimlaneLayout.prototype.swimlanes

Holds the array of mxCell of the ordered swimlanes to lay out

dummyVertices

mxSwimlaneLayout.prototype.dummyVertices

Holds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes

dummyVertexWidth

mxSwimlaneLayout.prototype.dummyVertexWidth

The cell width of any dummy vertices inserted

resizeParent

mxSwimlaneLayout.prototype.resizeParent

Specifies if the parent should be resized after the layout so that it contains all the child cells.  Default is false.  See also parentBorder.

maintainParentLocation

mxSwimlaneLayout.prototype.maintainParentLocation

Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.  Default is false for backwards compatibility.

moveParent

mxSwimlaneLayout.prototype.moveParent

Specifies if the parent should be moved if resizeParent is enabled.  Default is false.

parentBorder

mxSwimlaneLayout.prototype.parentBorder

The border to be added around the children if the parent is to be resized using resizeParent.  Default is 0.

intraCellSpacing

mxSwimlaneLayout.prototype.intraCellSpacing

The spacing buffer added between cells on the same layer.  Default is 30.

interRankCellSpacing

mxSwimlaneLayout.prototype.interRankCellSpacing

The spacing buffer added between cell on adjacent layers.  Default is 50.

interHierarchySpacing

mxSwimlaneLayout.prototype.interHierarchySpacing

The spacing buffer between unconnected hierarchies.  Default is 60.

parallelEdgeSpacing

mxSwimlaneLayout.prototype.parallelEdgeSpacing

The distance between each parallel edge on each ranks for long edges

orientation

mxSwimlaneLayout.prototype.orientation

The position of the root node(s) relative to the laid out graph in.  Default is mxConstants.DIRECTION_NORTH.

fineTuning

mxSwimlaneLayout.prototype.fineTuning

Whether or not to perform local optimisations and iterate multiple times through the algorithm.  Default is true.

tightenToSource

mxSwimlaneLayout.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

disableEdgeStyle

mxSwimlaneLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.  Default is true.

traverseAncestors

mxSwimlaneLayout.prototype.traverseAncestors

Whether or not to drill into child cells and layout in reverse group order.  This also cause the layout to navigate edges whose terminal vertices * have different parents but are in the same ancestry chain

model

mxSwimlaneLayout.prototype.model

The internal mxSwimlaneModel formed of the layout.

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgeStyle

mxHierarchicalLayout.prototype.edgeStyle

The style to apply between cell layers to edge segments

Functions

getModel

mxSwimlaneLayout.prototype.getModel = function()

Returns the internal mxSwimlaneModel for this layout algorithm.

execute

mxSwimlaneLayout.prototype.execute = function(parent,
swimlanes)

Executes the layout for the children of the specified parent.

Parameters

parentParent mxCell that contains the children to be laid out.
swimlanesOrdered array of swimlanes to be laid out

updateGroupBounds

mxSwimlaneLayout.prototype.updateGroupBounds = function()

Updates the bounds of the given array of groups so that it includes all child vertices.

findRoots

mxSwimlaneLayout.prototype.findRoots = function(parent,
vertices)

Returns all visible children in the given parent which do not have incoming edges.  If the result is empty then the children with the maximum difference between incoming and outgoing edges are returned.  This takes into account edges that are being promoted to the given root due to invisible children or collapsed cells.

Parameters

parentmxCell whose children should be checked.
verticesarray of vertices to limit search to

getEdges

mxSwimlaneLayout.prototype.getEdges = function(cell)

Returns the connected edges for the given cell.

Parameters

cellmxCell whose edges should be returned.

getVisibleTerminal

mxSwimlaneLayout.prototype.getVisibleTerminal = function(edge,
source)

Helper function to return visible terminal for edge allowing for ports

Parameters

edgemxCell whose edges should be returned.
sourceBoolean that specifies whether the source or target terminal is to be returned

run

mxSwimlaneLayout.prototype.run = function(parent)

The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.  It runs each stage of the layout that has been created.

filterDescendants

mxSwimlaneLayout.prototype.filterDescendants = function(cell,
result)

Creates an array of descendant cells

isPort

mxSwimlaneLayout.prototype.isPort = function(cell)

Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal

Parameters

cellmxCell that represents the port.

getEdgesBetween

mxSwimlaneLayout.prototype.getEdgesBetween = function(source,
target,
directed)

Returns the edges between the given source and target.  This takes into account collapsed and invisible cells and ports.

Parameters

source - target - directed -

cycleStage

mxSwimlaneLayout.prototype.cycleStage = function(parent)

Executes the cycle stage using mxMinimumCycleRemover.

layeringStage

mxSwimlaneLayout.prototype.layeringStage = function()

Implements first stage of a Sugiyama layout.

crossingStage

mxSwimlaneLayout.prototype.crossingStage = function(parent)

Executes the crossing stage using mxMedianHybridCrossingReduction.

placementStage

mxSwimlaneLayout.prototype.placementStage = function(initialX,
parent)

Executes the placement stage using mxCoordinateAssignment.

mxGraphModel

Extends mxEventSource to implement a graph model.  The graph model acts as a wrapper around the cells which are in charge of storing the actual graph datastructure.  The model acts as a transactional wrapper with event notification for all changes, whereas the cells contain the atomic operations for updating the actual datastructure.

Layers

The cell hierarchy in the model must have a top-level root cell which contains the layers (typically one default layer), which in turn contain the top-level cells of the layers.  This means each cell is contained in a layer.  If no layers are required, then all new cells should be added to the default layer.

Layers are useful for hiding and showing groups of cells, or for placing groups of cells on top of other cells in the display.  To identify a layer, the isLayer function is used.  It returns true if the parent of the given cell is the root of the model.

Events

See events section for more details.  There is a new set of events for tracking transactional changes as they happen.  The events are called startEdit for the initial beginUpdate, executed for each executed change and endEdit for the terminal endUpdate.  The executed event contains a property called change which represents the change after execution.

Encoding the model

To encode a graph model, use the following code

var enc = new mxCodec();
var node = enc.encode(graph.getModel());

This will create an XML node that contains all the model information.

Encoding and decoding changes

For the encoding of changes, a graph model listener is required that encodes each change from the given array of changes.

model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;
  var nodes = [];
  var codec = new mxCodec();

  for (var i = 0; i < changes.length; i++)
  {
    nodes.push(codec.encode(changes[i]));
  }
  // do something with the nodes
});

For the decoding and execution of changes, the codec needs a lookup function that allows it to resolve cell IDs as follows:

var codec = new mxCodec();
codec.lookup = function(id)
{
  return model.getCell(id);
}

For each encoded change (represented by a node), the following code can be used to carry out the decoding and create a change object.

var changes = [];
var change = codec.decode(node);
change.model = model;
change.execute();
changes.push(change);

The changes can then be dispatched using the model as follows.

var edit = new mxUndoableEdit(model, false);
edit.changes = changes;

edit.notify = function()
{
  edit.source.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', edit.changes));
  edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY,
     'edit', edit, 'changes', edit.changes));
}

model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
model.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', changes));
Summary
Events
mxEvent.CHANGEFires when an undoable edit is dispatched.
mxEvent.NOTIFYSame as mxEvent.CHANGE, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model.
mxEvent.EXECUTEFires between begin- and endUpdate and after an atomic change was executed in the model.
mxEvent.EXECUTEDFires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.BEGIN_UPDATEFires after the updateLevel was incremented in beginUpdate.
mxEvent.START_EDITFires after the updateLevel was changed from 0 to 1.
mxEvent.END_UPDATEFires after the updateLevel was decreased in endUpdate but before any notification or change dispatching.
mxEvent.END_EDITFires after the updateLevel was changed from 1 to 0.
mxEvent.BEFORE_UNDOFires before the change is dispatched after the update level has reached 0 in endUpdate.
mxEvent.UNDOFires after the change was dispatched in endUpdate.
Functions
mxGraphModelConstructs a new graph model.
Variables
rootHolds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
cellsMaps from Ids to cells.
maintainEdgeParentSpecifies if edges should automatically be moved into the nearest common ancestor of their terminals.
ignoreRelativeEdgeParentSpecifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.
createIdsSpecifies if the model should automatically create Ids for new cells.
prefixDefines the prefix of new Ids.
postfixDefines the postfix of new Ids.
nextIdSpecifies the next Id to be created.
currentEditHolds the changes for the current transaction.
updateLevelCounter for the depth of nested transactions.
endingUpdateTrue if the program flow is currently inside endUpdate.
Functions
clearSets a new root using createRoot.
isCreateIdsReturns createIds.
setCreateIdsSets createIds.
createRootCreates a new root cell with a default layer (child 0).
getCellReturns the mxCell for the specified Id or null if no cell can be found for the given Id.
filterCellsReturns the cells from the given array where the given filter function returns true.
getDescendantsReturns all descendants of the given cell and the cell itself in an array.
filterDescendantsVisits all cells recursively and applies the specified filter function to each cell.
getRootReturns the root of the model or the topmost parent of the given cell.
setRootSets the root of the model using mxRootChange and adds the change to the current transaction.
rootChangedInner callback to change the root of the model and update the internal datastructures, such as cells and nextId.
isRootReturns true if the given cell is the root of the model and a non-null value.
isLayerReturns true if isRoot returns true for the parent of the given cell.
isAncestorReturns true if the given parent is an ancestor of the given child.
containsReturns true if the model contains the given mxCell.
getParentReturns the parent of the given cell.
addAdds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.
cellAddedInner callback to update cells when a cell has been added.
createIdHook method to create an Id for the specified cell.
updateEdgeParentsUpdates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
updateEdgeParentInner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.
getOriginReturns the absolute, accumulated origin for the children inside the given parent as an mxPoint.
getNearestCommonAncestorReturns the nearest common ancestor for the specified cells.
removeRemoves the specified cell from the model using mxChildChange and adds the change to the current transaction.
cellRemovedInner callback to update cells when a cell has been removed.
parentForCellChangedInner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.
getChildCountReturns the number of children in the given cell.
getChildAtReturns the child of the given mxCell at the given index.
getChildrenReturns all children of the given mxCell as an array of mxCells.
getChildVerticesReturns the child vertices of the given parent.
getChildEdgesReturns the child edges of the given parent.
getChildCellsReturns the children of the given cell that are vertices and/or edges depending on the arguments.
getTerminalReturns the source or target mxCell of the given edge depending on the value of the boolean parameter.
setTerminalSets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.
setTerminalsSets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.
terminalForCellChangedInner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.
getEdgeCountReturns the number of distinct edges connected to the given cell.
getEdgeAtReturns the edge of cell at the given index.
getDirectedEdgeCountReturns the number of incoming or outgoing edges, ignoring the given edge.
getConnectionsReturns all edges of the given cell without loops.
getIncomingEdgesReturns the incoming edges of the given cell without loops.
getOutgoingEdgesReturns the outgoing edges of the given cell without loops.
getEdgesReturns all distinct edges connected to this cell as a new array of mxCells.
getEdgesBetweenReturns all edges between the given source and target pair.
getOppositesReturns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.
getTopmostCellsReturns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.
isVertexReturns true if the given cell is a vertex.
isEdgeReturns true if the given cell is an edge.
isConnectableReturns true if the given mxCell is connectable.
getValueReturns the user object of the given mxCell using mxCell.getValue.
setValueSets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
valueForCellChangedInner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.
getGeometryReturns the mxGeometry of the given mxCell.
setGeometrySets the mxGeometry of the given mxCell.
geometryForCellChangedInner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.
getStyleReturns the style of the given mxCell.
setStyleSets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
styleForCellChangedInner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.
isCollapsedReturns true if the given mxCell is collapsed.
setCollapsedSets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
collapsedStateForCellChangedInner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.
isVisibleReturns true if the given mxCell is visible.
setVisibleSets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
visibleStateForCellChangedInner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.
executeExecutes the given edit and fires events if required.
beginUpdateIncrements the updateLevel by one.
endUpdateDecrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0.
createUndoableEditCreates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.
mergeChildrenMerges the children of the given cell into the given target cell inside this model.
mergeChildrenClones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.
getParentsReturns an array that represents the set (no duplicates) of all parents for the given array of cells.
cloneCellReturns a deep clone of the given mxCell (including the children) which is created using cloneCells.
cloneCellsReturns an array of clones for the given array of mxCells.
cloneCellImplInner helper method for cloning cells recursively.
cellClonedHook for cloning the cell.
restoreCloneInner helper method for restoring the connections in a network of cloned cells.

Events

mxEvent.CHANGE

Fires when an undoable edit is dispatched.  The <code>edit</code> property contains the mxUndoableEdit.  The <code>changes</code> property contains the array of atomic changes inside the undoable edit.  The changes property is <strong>deprecated</strong>, please use edit.changes instead.

Example

For finding newly inserted cells, the following code can be used

graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;

  for (var i = 0; i < changes.length; i++)
  {
    var change = changes[i];

    if (change instanceof mxChildChange &&
      change.change.previous == null)
    {
      graph.startEditingAtCell(change.child);
      break;
    }
  }
});

mxEvent.NOTIFY

Same as mxEvent.CHANGE, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model.  In such a setup, only local changes should trigger a notify event and all changes should trigger a change event.

mxEvent.EXECUTE

Fires between begin- and endUpdate and after an atomic change was executed in the model.  The <code>change</code> property contains the atomic change that was executed.

mxEvent.EXECUTED

Fires between START_EDIT and END_EDIT after an atomic change was executed.  The <code>change</code> property contains the change that was executed.

mxEvent.BEGIN_UPDATE

Fires after the updateLevel was incremented in beginUpdate.  This event contains no properties.

mxEvent.START_EDIT

Fires after the updateLevel was changed from 0 to 1.  This event contains no properties.

mxEvent.END_UPDATE

Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching.  The <code>edit</code> property contains the currentEdit.

mxEvent.END_EDIT

Fires after the updateLevel was changed from 1 to 0.  This event contains no properties.

mxEvent.BEFORE_UNDO

Fires before the change is dispatched after the update level has reached 0 in endUpdate.  The <code>edit</code> property contains the <curreneEdit>.

mxEvent.UNDO

Fires after the change was dispatched in endUpdate.  The <code>edit</code> property contains the currentEdit.

Functions

mxGraphModel

function mxGraphModel(root)

Constructs a new graph model.  If no root is specified then a new root mxCell with a default layer is created.

Parameters

rootmxCell that represents the root cell.

Variables

root

mxGraphModel.prototype.root

Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.  That is, the actual elements of the diagram are supposed to live in the third generation of cells and below.

cells

mxGraphModel.prototype.cells

Maps from Ids to cells.

maintainEdgeParent

mxGraphModel.prototype.maintainEdgeParent

Specifies if edges should automatically be moved into the nearest common ancestor of their terminals.  Default is true.

ignoreRelativeEdgeParent

mxGraphModel.prototype.ignoreRelativeEdgeParent

Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.  Default is true.

createIds

mxGraphModel.prototype.createIds

Specifies if the model should automatically create Ids for new cells.  Default is true.

prefix

mxGraphModel.prototype.prefix

Defines the prefix of new Ids.  Default is an empty string.

postfix

mxGraphModel.prototype.postfix

Defines the postfix of new Ids.  Default is an empty string.

nextId

mxGraphModel.prototype.nextId

Specifies the next Id to be created.  Initial value is 0.

currentEdit

mxGraphModel.prototype.currentEdit

Holds the changes for the current transaction.  If the transaction is closed then a new object is created for this variable using createUndoableEdit.

updateLevel

mxGraphModel.prototype.updateLevel

Counter for the depth of nested transactions.  Each call to beginUpdate will increment this number and each call to endUpdate will decrement it.  When the counter reaches 0, the transaction is closed and the respective events are fired.  Initial value is 0.

endingUpdate

mxGraphModel.prototype.endingUpdate

True if the program flow is currently inside endUpdate.

Functions

clear

mxGraphModel.prototype.clear = function()

Sets a new root using createRoot.

isCreateIds

mxGraphModel.prototype.isCreateIds = function()

Returns createIds.

setCreateIds

mxGraphModel.prototype.setCreateIds = function(value)

Sets createIds.

createRoot

mxGraphModel.prototype.createRoot = function()

Creates a new root cell with a default layer (child 0).

getCell

mxGraphModel.prototype.getCell = function(id)

Returns the mxCell for the specified Id or null if no cell can be found for the given Id.

Parameters

idA string representing the Id of the cell.

filterCells

mxGraphModel.prototype.filterCells = function(cells,
filter)

Returns the cells from the given array where the given filter function returns true.

getDescendants

mxGraphModel.prototype.getDescendants = function(parent)

Returns all descendants of the given cell and the cell itself in an array.

Parameters

parentmxCell whose descendants should be returned.

filterDescendants

mxGraphModel.prototype.filterDescendants = function(filter,
parent)

Visits all cells recursively and applies the specified filter function to each cell.  If the function returns true then the cell is added to the resulting array.  The parent and result paramters are optional.  If parent is not specified then the recursion starts at root.

Example

The following example extracts all vertices from a given model:

var filter = function(cell)
{
 return model.isVertex(cell);
}
var vertices = model.filterDescendants(filter);

Parameters

filterJavaScript function that takes an mxCell as an argument and returns a boolean.
parentOptional mxCell that is used as the root of the recursion.

getRoot

mxGraphModel.prototype.getRoot = function(cell)

Returns the root of the model or the topmost parent of the given cell.

Parameters

cellOptional mxCell that specifies the child.

setRoot

mxGraphModel.prototype.setRoot = function(root)

Sets the root of the model using mxRootChange and adds the change to the current transaction.  This resets all datastructures in the model and is the preferred way of clearing an existing model.  Returns the new root.

Example

var root = new mxCell();
root.insert(new mxCell());
model.setRoot(root);

Parameters

rootmxCell that specifies the new root.

rootChanged

mxGraphModel.prototype.rootChanged = function(root)

Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId.  Returns the previous root.

Parameters

rootmxCell that specifies the new root.

isRoot

mxGraphModel.prototype.isRoot = function(cell)

Returns true if the given cell is the root of the model and a non-null value.

Parameters

cellmxCell that represents the possible root.

isLayer

mxGraphModel.prototype.isLayer = function(cell)

Returns true if isRoot returns true for the parent of the given cell.

Parameters

cellmxCell that represents the possible layer.

isAncestor

mxGraphModel.prototype.isAncestor = function(parent,
child)

Returns true if the given parent is an ancestor of the given child.  Note returns true if child == parent.

Parameters

parentmxCell that specifies the parent.
childmxCell that specifies the child.

contains

mxGraphModel.prototype.contains = function(cell)

Returns true if the model contains the given mxCell.

Parameters

cellmxCell that specifies the cell.

getParent

mxGraphModel.prototype.getParent = function(cell)

Returns the parent of the given cell.

Parameters

cellmxCell whose parent should be returned.

add

mxGraphModel.prototype.add = function(parent,
child,
index)

Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.  If no index is specified then the child is appended to the parent’s array of children.  Returns the inserted child.

Parameters

parentmxCell that specifies the parent to contain the child.
childmxCell that specifies the child to be inserted.
indexOptional integer that specifies the index of the child.

cellAdded

mxGraphModel.prototype.cellAdded = function(cell)

Inner callback to update cells when a cell has been added.  This implementation resolves collisions by creating new Ids.  To change the ID of a cell after it was inserted into the model, use the following code:

(code delete model.cells[cell.getId()]; cell.setId(newId); model.cells[cell.getId()] = cell; (end)

If the change of the ID should be part of the command history, then the cell should be removed from the model and a clone with the new ID should be reinserted into the model instead.

Parameters

cellmxCell that specifies the cell that has been added.

createId

mxGraphModel.prototype.createId = function(cell)

Hook method to create an Id for the specified cell.  This implementation concatenates prefix, id and postfix to create the Id and increments nextId.  The cell is ignored by this implementation, but can be used in overridden methods to prefix the Ids with eg. the cell type.

Parameters

cellmxCell to create the Id for.

updateEdgeParents

mxGraphModel.prototype.updateEdgeParents = function(cell,
root)

Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.

updateEdgeParent

mxGraphModel.prototype.updateEdgeParent = function(edge,
root)

Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.

Parameters

edgemxCell that specifies the edge.
rootmxCell that represents the current root of the model.

getOrigin

mxGraphModel.prototype.getOrigin = function(cell)

Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.

getNearestCommonAncestor

mxGraphModel.prototype.getNearestCommonAncestor = function(cell1,
cell2)

Returns the nearest common ancestor for the specified cells.

Parameters

cell1mxCell that specifies the first cell in the tree.
cell2mxCell that specifies the second cell in the tree.

remove

mxGraphModel.prototype.remove = function(cell)

Removes the specified cell from the model using mxChildChange and adds the change to the current transaction.  This operation will remove the cell and all of its children from the model.  Returns the removed cell.

Parameters

cellmxCell that should be removed.

cellRemoved

mxGraphModel.prototype.cellRemoved = function(cell)

Inner callback to update cells when a cell has been removed.

Parameters

cellmxCell that specifies the cell that has been removed.

parentForCellChanged

mxGraphModel.prototype.parentForCellChanged = function(cell,
parent,
index)

Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.

Parameters

cellmxCell to update the parent for.
parentmxCell that specifies the new parent of the cell.
indexOptional integer that defines the index of the child in the parent’s child array.

getChildCount

mxGraphModel.prototype.getChildCount = function(cell)

Returns the number of children in the given cell.

Parameters

cellmxCell whose number of children should be returned.

getChildAt

mxGraphModel.prototype.getChildAt = function(cell,
index)

Returns the child of the given mxCell at the given index.

Parameters

cellmxCell that represents the parent.
indexInteger that specifies the index of the child to be returned.

getChildren

mxGraphModel.prototype.getChildren = function(cell)

Returns all children of the given mxCell as an array of mxCells.  The return value should be only be read.

Parameters

cellmxCell the represents the parent.

getChildVertices

mxGraphModel.prototype.getChildVertices = function(parent)

Returns the child vertices of the given parent.

Parameters

cellmxCell whose child vertices should be returned.

getChildEdges

mxGraphModel.prototype.getChildEdges = function(parent)

Returns the child edges of the given parent.

Parameters

cellmxCell whose child edges should be returned.

getChildCells

mxGraphModel.prototype.getChildCells = function(parent,
vertices,
edges)

Returns the children of the given cell that are vertices and/or edges depending on the arguments.

Parameters

cellmxCell the represents the parent.
verticesBoolean indicating if child vertices should be returned.  Default is false.
edgesBoolean indicating if child edges should be returned.  Default is false.

getTerminal

mxGraphModel.prototype.getTerminal = function(edge,
isSource)

Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.

Parameters

edgemxCell that specifies the edge.
isSourceBoolean indicating which end of the edge should be returned.

setTerminal

mxGraphModel.prototype.setTerminal = function(edge,
terminal,
isSource)

Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.  This implementation updates the parent of the edge using updateEdgeParent if required.

Parameters

edgemxCell that specifies the edge.
terminalmxCell that specifies the new terminal.
isSourceBoolean indicating if the terminal is the new source or target terminal of the edge.

setTerminals

mxGraphModel.prototype.setTerminals = function(edge,
source,
target)

Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.

Parameters

edgemxCell that specifies the edge.
sourcemxCell that specifies the new source terminal.
targetmxCell that specifies the new target terminal.

terminalForCellChanged

mxGraphModel.prototype.terminalForCellChanged = function(edge,
terminal,
isSource)

Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.

Parameters

edgemxCell that specifies the edge to be updated.
terminalmxCell that specifies the new terminal.
isSourceBoolean indicating if the terminal is the new source or target terminal of the edge.

getEdgeCount

mxGraphModel.prototype.getEdgeCount = function(cell)

Returns the number of distinct edges connected to the given cell.

Parameters

cellmxCell that represents the vertex.

getEdgeAt

mxGraphModel.prototype.getEdgeAt = function(cell,
index)

Returns the edge of cell at the given index.

Parameters

cellmxCell that specifies the vertex.
indexInteger that specifies the index of the edge to return.

getDirectedEdgeCount

mxGraphModel.prototype.getDirectedEdgeCount = function(cell,
outgoing,
ignoredEdge)

Returns the number of incoming or outgoing edges, ignoring the given edge.

Parameters

cellmxCell whose edge count should be returned.
outgoingBoolean that specifies if the number of outgoing or incoming edges should be returned.
ignoredEdgemxCell that represents an edge to be ignored.

getConnections

mxGraphModel.prototype.getConnections = function(cell)

Returns all edges of the given cell without loops.

Parameters

cellmxCell whose edges should be returned.

getIncomingEdges

mxGraphModel.prototype.getIncomingEdges = function(cell)

Returns the incoming edges of the given cell without loops.

Parameters

cellmxCell whose incoming edges should be returned.

getOutgoingEdges

mxGraphModel.prototype.getOutgoingEdges = function(cell)

Returns the outgoing edges of the given cell without loops.

Parameters

cellmxCell whose outgoing edges should be returned.

getEdges

mxGraphModel.prototype.getEdges = function(cell,
incoming,
outgoing,
includeLoops)

Returns all distinct edges connected to this cell as a new array of mxCells.  If at least one of incoming or outgoing is true, then loops are ignored, otherwise if both are false, then all edges connected to the given cell are returned including loops.

Parameters

cellmxCell that specifies the cell.
incomingOptional boolean that specifies if incoming edges should be returned.  Default is true.
outgoingOptional boolean that specifies if outgoing edges should be returned.  Default is true.
includeLoopsOptional boolean that specifies if loops should be returned.  Default is true.

getEdgesBetween

mxGraphModel.prototype.getEdgesBetween = function(source,
target,
directed)

Returns all edges between the given source and target pair.  If directed is true, then only edges from the source to the target are returned, otherwise, all edges between the two cells are returned.

Parameters

sourcemxCell that defines the source terminal of the edge to be returned.
targetmxCell that defines the target terminal of the edge to be returned.
directedOptional boolean that specifies if the direction of the edge should be taken into account.  Default is false.

getOpposites

mxGraphModel.prototype.getOpposites = function(edges,
terminal,
sources,
targets)

Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.  The result is returned as an array of mxCells.

Parameters

edgesArray of mxCells that contain the edges to be examined.
terminalmxCell that specifies the known end of the edges.
sourcesBoolean that specifies if source terminals should be contained in the result.  Default is true.
targetsBoolean that specifies if target terminals should be contained in the result.  Default is true.

getTopmostCells

mxGraphModel.prototype.getTopmostCells = function(cells)

Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.  Duplicates should be removed in the cells array to improve performance.

Parameters

cellsArray of mxCells whose topmost ancestors should be returned.

isVertex

mxGraphModel.prototype.isVertex = function(cell)

Returns true if the given cell is a vertex.

Parameters

cellmxCell that represents the possible vertex.

isEdge

mxGraphModel.prototype.isEdge = function(cell)

Returns true if the given cell is an edge.

Parameters

cellmxCell that represents the possible edge.

isConnectable

mxGraphModel.prototype.isConnectable = function(cell)

Returns true if the given mxCell is connectable.  If <edgesConnectable> is false, then this function returns false for all edges else it returns the return value of mxCell.isConnectable.

Parameters

cellmxCell whose connectable state should be returned.

getValue

mxGraphModel.prototype.getValue = function(cell)

Returns the user object of the given mxCell using mxCell.getValue.

Parameters

cellmxCell whose user object should be returned.

setValue

mxGraphModel.prototype.setValue = function(cell,
value)

Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.

Parameters

cellmxCell whose user object should be changed.
valueObject that defines the new user object.

valueForCellChanged

mxGraphModel.prototype.valueForCellChanged = function(cell,
value)

Inner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.

To change a specific attribute in an XML node, the following code can be used.

graph.getModel().valueForCellChanged = function(cell, value)
{
  var previous = cell.value.getAttribute('label');
  cell.value.setAttribute('label', value);

  return previous;
};

getGeometry

mxGraphModel.prototype.getGeometry = function(cell)

Returns the mxGeometry of the given mxCell.

Parameters

cellmxCell whose geometry should be returned.

setGeometry

mxGraphModel.prototype.setGeometry = function(cell,
geometry)

Sets the mxGeometry of the given mxCell.  The actual update of the cell is carried out in geometryForCellChanged.  The mxGeometryChange action is used to encapsulate the change.

Parameters

cellmxCell whose geometry should be changed.
geometrymxGeometry that defines the new geometry.

geometryForCellChanged

mxGraphModel.prototype.geometryForCellChanged = function(cell,
geometry)

Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.

getStyle

mxGraphModel.prototype.getStyle = function(cell)

Returns the style of the given mxCell.

Parameters

cellmxCell whose style should be returned.

setStyle

mxGraphModel.prototype.setStyle = function(cell,
style)

Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.

Parameters

cellmxCell whose style should be changed.
styleString of the form [stylename;|key=value;] to specify the new cell style.

styleForCellChanged

mxGraphModel.prototype.styleForCellChanged = function(cell,
style)

Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.

Parameters

cellmxCell that specifies the cell to be updated.
styleString of the form [stylename;|key=value;] to specify the new cell style.

isCollapsed

mxGraphModel.prototype.isCollapsed = function(cell)

Returns true if the given mxCell is collapsed.

Parameters

cellmxCell whose collapsed state should be returned.

setCollapsed

mxGraphModel.prototype.setCollapsed = function(cell,
collapsed)

Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.

Parameters

cellmxCell whose collapsed state should be changed.
collapsedBoolean that specifies the new collpased state.

collapsedStateForCellChanged

mxGraphModel.prototype.collapsedStateForCellChanged = function(cell,
collapsed)

Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.

Parameters

cellmxCell that specifies the cell to be updated.
collapsedBoolean that specifies the new collpased state.

isVisible

mxGraphModel.prototype.isVisible = function(cell)

Returns true if the given mxCell is visible.

Parameters

cellmxCell whose visible state should be returned.

setVisible

mxGraphModel.prototype.setVisible = function(cell,
visible)

Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.

Parameters

cellmxCell whose visible state should be changed.
visibleBoolean that specifies the new visible state.

visibleStateForCellChanged

mxGraphModel.prototype.visibleStateForCellChanged = function(cell,
visible)

Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.

Parameters

cellmxCell that specifies the cell to be updated.
visibleBoolean that specifies the new visible state.

execute

mxGraphModel.prototype.execute = function(change)

Executes the given edit and fires events if required.  The edit object requires an execute function which is invoked.  The edit is added to the currentEdit between beginUpdate and endUpdate calls, so that events will be fired if this execute is an individual transaction, that is, if no previous beginUpdate calls have been made without calling endUpdate.  This implementation fires an execute event before executing the given change.

Parameters

changeObject that described the change.

beginUpdate

mxGraphModel.prototype.beginUpdate = function()

Increments the updateLevel by one.  The event notification is queued until updateLevel reaches 0 by use of endUpdate.

All changes on mxGraphModel are transactional, that is, they are executed in a single undoable change on the model (without transaction isolation).  Therefore, if you want to combine any number of changes into a single undoable change, you should group any two or more API calls that modify the graph model between beginUpdate and endUpdate calls as shown here:

var model = graph.getModel();
var parent = graph.getDefaultParent();
var index = model.getChildCount(parent);
model.beginUpdate();
try
{
  model.add(parent, v1, index);
  model.add(parent, v2, index+1);
}
finally
{
  model.endUpdate();
}

Of course there is a shortcut for appending a sequence of cells into the default parent:

graph.addCells([v1, v2]).

endUpdate

mxGraphModel.prototype.endUpdate = function()

Decrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0.  This function indirectly fires a <change> event by invoking the notify function on the currentEdit und then creates a new currentEdit using createUndoableEdit.

The <undo> event is fired only once per edit, whereas the <change> event is fired whenever the notify function is invoked, that is, on undo and redo of the edit.

createUndoableEdit

mxGraphModel.prototype.createUndoableEdit = function(significant)

Creates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.

Parameters

significantOptional boolean that specifies if the edit to be created is significant.  Default is true.

mergeChildren

mxGraphModel.prototype.mergeChildren = function(from,
to,
cloneAllEdges)

Merges the children of the given cell into the given target cell inside this model.  All cells are cloned unless there is a corresponding cell in the model with the same id, in which case the source cell is ignored and all edges are connected to the corresponding cell in this model.  Edges are considered to have no identity and are always cloned unless the cloneAllEdges flag is set to false, in which case edges with the same id in the target model are reconnected to reflect the terminals of the source edges.

mergeChildren

mxGraphModel.prototype.mergeChildrenImpl = function(from,
to,
cloneAllEdges,
mapping)

Clones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.

getParents

mxGraphModel.prototype.getParents = function(cells)

Returns an array that represents the set (no duplicates) of all parents for the given array of cells.

Parameters

cellsArray of cells whose parents should be returned.

cloneCell

mxGraphModel.prototype.cloneCell = function(cell)

Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.

Parameters

cellmxCell to be cloned.

cloneCells

mxGraphModel.prototype.cloneCells = function(cells,
includeChildren,
mapping)

Returns an array of clones for the given array of mxCells.  Depending on the value of includeChildren, a deep clone is created for each cell.  Connections are restored based if the corresponding cell is contained in the passed in array.

Parameters

cellsArray of mxCell to be cloned.
includeChildrenBoolean indicating if the cells should be cloned with all descendants.
mappingOptional mapping for existing clones.

cloneCellImpl

mxGraphModel.prototype.cloneCellImpl = function(cell,
mapping,
includeChildren)

Inner helper method for cloning cells recursively.

cellCloned

mxGraphModel.prototype.cellCloned = function(cell)

Hook for cloning the cell.  This returns cell.clone() or any possible exceptions.

restoreClone

mxGraphModel.prototype.restoreClone = function(clone,
cell,
mapping)

Inner helper method for restoring the connections in a network of cloned cells.

mxRootChange

Action to change the root in a model.

Summary
Functions
mxRootChangeConstructs a change of the root in the specified model.
executeCarries out a change of the root using mxGraphModel.rootChanged.

Functions

mxRootChange

function mxRootChange(model,
root)

Constructs a change of the root in the specified model.

execute

mxRootChange.prototype.execute = function()

Carries out a change of the root using mxGraphModel.rootChanged.

mxChildChange

Action to add or remove a child in a model.

Summary
Functions
mxChildChangeConstructs a change of a child in the specified model.
executeChanges the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
disconnectDisconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.

Functions

mxChildChange

function mxChildChange(model,
parent,
child,
index)

Constructs a change of a child in the specified model.

execute

mxChildChange.prototype.execute = function()

Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.

disconnect

Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.

mxTerminalChange

Action to change a terminal in a model.

Summary
Functions
mxTerminalChangeConstructs a change of a terminal in the specified model.
executeChanges the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.

Functions

mxTerminalChange

function mxTerminalChange(model,
cell,
terminal,
source)

Constructs a change of a terminal in the specified model.

execute

mxTerminalChange.prototype.execute = function()

Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.

mxValueChange

Action to change a user object in a model.

Summary
Functions
mxValueChangeConstructs a change of a user object in the specified model.
executeChanges the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.

Functions

mxValueChange

function mxValueChange(model,
cell,
value)

Constructs a change of a user object in the specified model.

execute

mxValueChange.prototype.execute = function()

Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.

mxStyleChange

Action to change a cell’s style in a model.

Summary
Functions
mxStyleChangeConstructs a change of a style in the specified model.
executeChanges the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.

Functions

mxStyleChange

function mxStyleChange(model,
cell,
style)

Constructs a change of a style in the specified model.

execute

mxStyleChange.prototype.execute = function()

Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.

mxGeometryChange

Action to change a cell’s geometry in a model.

Summary
Functions
mxGeometryChangeConstructs a change of a geometry in the specified model.
executeChanges the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.

Functions

mxGeometryChange

function mxGeometryChange(model,
cell,
geometry)

Constructs a change of a geometry in the specified model.

execute

mxGeometryChange.prototype.execute = function()

Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.

mxCollapseChange

Action to change a cell’s collapsed state in a model.

Summary
Functions
mxCollapseChangeConstructs a change of a collapsed state in the specified model.
executeChanges the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.

Functions

mxCollapseChange

function mxCollapseChange(model,
cell,
collapsed)

Constructs a change of a collapsed state in the specified model.

execute

mxCollapseChange.prototype.execute = function()

Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.

mxVisibleChange

Action to change a cell’s visible state in a model.

Summary
Functions
mxVisibleChangeConstructs a change of a visible state in the specified model.
executeChanges the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.

Functions

mxVisibleChange

function mxVisibleChange(model,
cell,
visible)

Constructs a change of a visible state in the specified model.

execute

mxVisibleChange.prototype.execute = function()

Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.

mxCellAttributeChange

Action to change the attribute of a cell’s user object.  There is no method on the graph model that uses this action.  To use the action, you can use the code shown in the example below.

Example

To change the attributeName in the cell’s user object to attributeValue, use the following code:

model.beginUpdate();
try
{
  var edit = new mxCellAttributeChange(
    cell, attributeName, attributeValue);
  model.execute(edit);
}
finally
{
  model.endUpdate();
}
Summary
Functions
mxCellAttributeChangeConstructs a change of a attribute of the DOM node stored as the value of the given mxCell.
executeChanges the attribute of the cell’s user object by using mxCell.setAttribute.

Functions

mxCellAttributeChange

function mxCellAttributeChange(cell,
attribute,
value)

Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.

execute

mxCellAttributeChange.prototype.execute = function()

Changes the attribute of the cell’s user object by using mxCell.setAttribute.

mxCell

Cells are the elements of the graph model.  They represent the state of the groups, vertices and edges in a graph.

Custom attributes

For custom attributes we recommend using an XML node as the value of a cell.  The following code can be used to create a cell with an XML node as the value:

var doc = mxUtils.createXmlDocument();
var node = doc.createElement('MyNode')
node.setAttribute('label', 'MyLabel');
node.setAttribute('attribute1', 'value1');
graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);

For the label to work, mxGraph.convertValueToString and mxGraph.cellLabelChanged should be overridden as follows:

graph.convertValueToString = function(cell)
{
  if (mxUtils.isNode(cell.value))
  {
    return cell.getAttribute('label', '')
  }
};

var cellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize)
{
  if (mxUtils.isNode(cell.value))
  {
    // Clones the value for correct undo/redo
    var elt = cell.value.cloneNode(true);
    elt.setAttribute('label', newValue);
    newValue = elt;
  }

  cellLabelChanged.apply(this, arguments);
};
Summary
Functions
onInitCalled from within the constructor.
mxCellConstructs a new cell to be used in a graph model.
Variables
idHolds the Id.
valueHolds the user object.
geometryHolds the mxGeometry.
styleHolds the style as a string of the form [(stylename|key=value);].
vertexSpecifies whether the cell is a vertex.
edgeSpecifies whether the cell is an edge.
connectableSpecifies whether the cell is connectable.
visibleSpecifies whether the cell is visible.
collapsedSpecifies whether the cell is collapsed.
parentReference to the parent cell.
sourceReference to the source terminal.
targetReference to the target terminal.
childrenHolds the child cells.
edgesHolds the edges.
mxTransientList of members that should not be cloned inside clone.
Functions
getIdReturns the Id of the cell as a string.
setIdSets the Id of the cell to the given string.
getValueReturns the user object of the cell.
setValueSets the user object of the cell.
valueChangedChanges the user object after an in-place edit and returns the previous value.
getGeometryReturns the mxGeometry that describes the geometry.
setGeometrySets the mxGeometry to be used as the geometry.
getStyleReturns a string that describes the style.
setStyleSets the string to be used as the style.
isVertexReturns true if the cell is a vertex.
setVertexSpecifies if the cell is a vertex.
isEdgeReturns true if the cell is an edge.
setEdgeSpecifies if the cell is an edge.
isConnectableReturns true if the cell is connectable.
setConnectableSets the connectable state.
isVisibleReturns true if the cell is visibile.
setVisibleSpecifies if the cell is visible.
isCollapsedReturns true if the cell is collapsed.
setCollapsedSets the collapsed state.
getParentReturns the cell’s parent.
setParentSets the parent cell.
getTerminalReturns the source or target terminal.
setTerminalSets the source or target terminal and returns the new terminal.
getChildCountReturns the number of child cells.
getIndexReturns the index of the specified child in the child array.
getChildAtReturns the child at the specified index.
insertInserts the specified child into the child array at the specified index and updates the parent reference of the child.
removeRemoves the child at the specified index from the child array and returns the child that was removed.
removeFromParentRemoves the cell from its parent.
getEdgeCountReturns the number of edges in the edge array.
getEdgeIndexReturns the index of the specified edge in edges.
getEdgeAtReturns the edge at the specified index in edges.
insertEdgeInserts the specified edge into the edge array and returns the edge.
removeEdgeRemoves the specified edge from the edge array and returns the edge.
removeFromTerminalRemoves the edge from its source or target terminal.
hasAttributeReturns true if the user object is an XML node that contains the given attribute.
getAttributeReturns the specified attribute from the user object if it is an XML node.
setAttributeSets the specified attribute on the user object if it is an XML node.
cloneReturns a clone of the cell.
cloneValueReturns a clone of the cell’s user object.

Functions

onInit

Called from within the constructor.

mxCell

function mxCell(value,
geometry,
style)

Constructs a new cell to be used in a graph model.  This method invokes onInit upon completion.

Parameters

valueOptional object that represents the cell value.
geometryOptional mxGeometry that specifies the geometry.
styleOptional formatted string that defines the style.

Variables

id

mxCell.prototype.id

Holds the Id.  Default is null.

value

mxCell.prototype.value

Holds the user object.  Default is null.

geometry

mxCell.prototype.geometry

Holds the mxGeometry.  Default is null.

style

mxCell.prototype.style

Holds the style as a string of the form [(stylename|key=value);].  Default is null.

vertex

mxCell.prototype.vertex

Specifies whether the cell is a vertex.  Default is false.

edge

mxCell.prototype.edge

Specifies whether the cell is an edge.  Default is false.

connectable

mxCell.prototype.connectable

Specifies whether the cell is connectable.  Default is true.

visible

mxCell.prototype.visible

Specifies whether the cell is visible.  Default is true.

collapsed

mxCell.prototype.collapsed

Specifies whether the cell is collapsed.  Default is false.

parent

mxCell.prototype.parent

Reference to the parent cell.

source

mxCell.prototype.source

Reference to the source terminal.

target

mxCell.prototype.target

Reference to the target terminal.

children

mxCell.prototype.children

Holds the child cells.

edges

mxCell.prototype.edges

Holds the edges.

mxTransient

mxCell.prototype.mxTransient

List of members that should not be cloned inside clone.  This field is passed to mxUtils.clone and is not made persistent in mxCellCodec.  This is not a convention for all classes, it is only used in this class to mark transient fields since transient modifiers are not supported by the language.

Functions

getId

mxCell.prototype.getId = function()

Returns the Id of the cell as a string.

setId

mxCell.prototype.setId = function(id)

Sets the Id of the cell to the given string.

getValue

mxCell.prototype.getValue = function()

Returns the user object of the cell.  The user object is stored in value.

setValue

mxCell.prototype.setValue = function(value)

Sets the user object of the cell.  The user object is stored in value.

valueChanged

mxCell.prototype.valueChanged = function(newValue)

Changes the user object after an in-place edit and returns the previous value.  This implementation replaces the user object with the given value and returns the old user object.

getGeometry

mxCell.prototype.getGeometry = function()

Returns the mxGeometry that describes the geometry.

setGeometry

mxCell.prototype.setGeometry = function(geometry)

Sets the mxGeometry to be used as the geometry.

getStyle

mxCell.prototype.getStyle = function()

Returns a string that describes the style.

setStyle

mxCell.prototype.setStyle = function(style)

Sets the string to be used as the style.

isVertex

mxCell.prototype.isVertex = function()

Returns true if the cell is a vertex.

setVertex

mxCell.prototype.setVertex = function(vertex)

Specifies if the cell is a vertex.  This should only be assigned at construction of the cell and not be changed during its lifecycle.

Parameters

vertexBoolean that specifies if the cell is a vertex.

isEdge

mxCell.prototype.isEdge = function()

Returns true if the cell is an edge.

setEdge

mxCell.prototype.setEdge = function(edge)

Specifies if the cell is an edge.  This should only be assigned at construction of the cell and not be changed during its lifecycle.

Parameters

edgeBoolean that specifies if the cell is an edge.

isConnectable

mxCell.prototype.isConnectable = function()

Returns true if the cell is connectable.

setConnectable

mxCell.prototype.setConnectable = function(connectable)

Sets the connectable state.

Parameters

connectableBoolean that specifies the new connectable state.

isVisible

mxCell.prototype.isVisible = function()

Returns true if the cell is visibile.

setVisible

mxCell.prototype.setVisible = function(visible)

Specifies if the cell is visible.

Parameters

visibleBoolean that specifies the new visible state.

isCollapsed

mxCell.prototype.isCollapsed = function()

Returns true if the cell is collapsed.

setCollapsed

mxCell.prototype.setCollapsed = function(collapsed)

Sets the collapsed state.

Parameters

collapsedBoolean that specifies the new collapsed state.

getParent

mxCell.prototype.getParent = function()

Returns the cell’s parent.

setParent

mxCell.prototype.setParent = function(parent)

Sets the parent cell.

Parameters

parentmxCell that represents the new parent.

getTerminal

mxCell.prototype.getTerminal = function(source)

Returns the source or target terminal.

Parameters

sourceBoolean that specifies if the source terminal should be returned.

setTerminal

mxCell.prototype.setTerminal = function(terminal,
isSource)

Sets the source or target terminal and returns the new terminal.

Parameters

terminalmxCell that represents the new source or target terminal.
isSourceBoolean that specifies if the source or target terminal should be set.

getChildCount

mxCell.prototype.getChildCount = function()

Returns the number of child cells.

getIndex

mxCell.prototype.getIndex = function(child)

Returns the index of the specified child in the child array.

Parameters

childChild whose index should be returned.

getChildAt

mxCell.prototype.getChildAt = function(index)

Returns the child at the specified index.

Parameters

indexInteger that specifies the child to be returned.

insert

mxCell.prototype.insert = function(child,
index)

Inserts the specified child into the child array at the specified index and updates the parent reference of the child.  If not childIndex is specified then the child is appended to the child array.  Returns the inserted child.

Parameters

childmxCell to be inserted or appended to the child array.
indexOptional integer that specifies the index at which the child should be inserted into the child array.

remove

mxCell.prototype.remove = function(index)

Removes the child at the specified index from the child array and returns the child that was removed.  Will remove the parent reference of the child.

Parameters

indexInteger that specifies the index of the child to be removed.

removeFromParent

mxCell.prototype.removeFromParent = function()

Removes the cell from its parent.

getEdgeCount

mxCell.prototype.getEdgeCount = function()

Returns the number of edges in the edge array.

getEdgeIndex

mxCell.prototype.getEdgeIndex = function(edge)

Returns the index of the specified edge in edges.

Parameters

edgemxCell whose index in edges should be returned.

getEdgeAt

mxCell.prototype.getEdgeAt = function(index)

Returns the edge at the specified index in edges.

Parameters

indexInteger that specifies the index of the edge to be returned.

insertEdge

mxCell.prototype.insertEdge = function(edge,
isOutgoing)

Inserts the specified edge into the edge array and returns the edge.  Will update the respective terminal reference of the edge.

Parameters

edgemxCell to be inserted into the edge array.
isOutgoingBoolean that specifies if the edge is outgoing.

removeEdge

mxCell.prototype.removeEdge = function(edge,
isOutgoing)

Removes the specified edge from the edge array and returns the edge.  Will remove the respective terminal reference from the edge.

Parameters

edgemxCell to be removed from the edge array.
isOutgoingBoolean that specifies if the edge is outgoing.

removeFromTerminal

mxCell.prototype.removeFromTerminal = function(isSource)

Removes the edge from its source or target terminal.

Parameters

isSourceBoolean that specifies if the edge should be removed from its source or target terminal.

hasAttribute

mxCell.prototype.hasAttribute = function(name)

Returns true if the user object is an XML node that contains the given attribute.

Parameters

nameName of the attribute.

getAttribute

mxCell.prototype.getAttribute = function(name,
defaultValue)

Returns the specified attribute from the user object if it is an XML node.

Parameters

nameName of the attribute whose value should be returned.
defaultValueOptional default value to use if the attribute has no value.

setAttribute

mxCell.prototype.setAttribute = function(name,
value)

Sets the specified attribute on the user object if it is an XML node.

Parameters

nameName of the attribute whose value should be set.
valueNew value of the attribute.

clone

mxCell.prototype.clone = function()

Returns a clone of the cell.  Uses cloneValue to clone the user object.  All fields in mxTransient are ignored during the cloning.

cloneValue

mxCell.prototype.cloneValue = function()

Returns a clone of the cell’s user object.

mxGeometry

Extends mxRectangle to represent the geometry of a cell.

For vertices, the geometry consists of the x- and y-location, and the width and height.  For edges, the geometry consists of the optional terminal- and control points.  The terminal points are only required if an edge is unconnected, and are stored in the sourcePoint> and targetPoint variables, respectively.

Example

If an edge is unconnected, that is, it has no source or target terminal, then a geometry with terminal points for a new edge can be defined as follows.

geometry.setTerminalPoint(new mxPoint(x1, y1), true);
geometry.points = [new mxPoint(x2, y2)];
geometry.setTerminalPoint(new mxPoint(x3, y3), false);

Control points are used regardless of the connected state of an edge and may be ignored or interpreted differently depending on the edge’s mxEdgeStyle.

To disable automatic reset of control points after a cell has been moved or resized, the the <mxGraph.resizeEdgesOnMove> and mxGraph.resetEdgesOnResize may be used.

Edge Labels

Using the x- and y-coordinates of a cell’s geometry, it is possible to position the label on edges on a specific location on the actual edge shape as it appears on the screen.  The x-coordinate of an edge’s geometry is used to describe the distance from the center of the edge from -1 to 1 with 0 being the center of the edge and the default value.  The y-coordinate of an edge’s geometry is used to describe the absolute, orthogonal distance in pixels from that point.  In addition, the mxGeometry.offset is used as an absolute offset vector from the resulting point.

This coordinate system is applied if relative is true, otherwise the offset defines the absolute vector from the edge’s center point to the label and the values for <x> and <y> are ignored.

The width and height parameter for edge geometries can be used to set the label width and height (eg. for word wrapping).

Ports

The term “port” refers to a relatively positioned, connectable child cell, which is used to specify the connection between the parent and another cell in the graph.  Ports are typically modeled as vertices with relative geometries.

Offsets

The offset field is interpreted in 3 different ways, depending on the cell and the geometry.  For edges, the offset defines the absolute offset for the edge label.  For relative geometries, the offset defines the absolute offset for the origin (top, left corner) of the vertex, otherwise the offset defines the absolute offset for the label inside the vertex or group.

Summary
Functions
mxGeometryConstructs a new object to describe the size and location of a vertex or the control points of an edge.
Variables
TRANSLATE_CONTROL_POINTSGlobal switch to translate the points in translate.
alternateBoundsStores alternate values for x, y, width and height in a rectangle.
sourcePointDefines the source mxPoint of the edge.
targetPointDefines the target mxPoint of the edge.
pointsArray of mxPoints which specifies the control points along the edge.
offsetFor edges, this holds the offset (in pixels) from the position defined by <x> and <y> on the edge.
relativeSpecifies if the coordinates in the geometry are to be interpreted as relative coordinates.
Functions
swapSwaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle.
getTerminalPointReturns the mxPoint representing the source or target point of this edge.
setTerminalPointSets the sourcePoint or targetPoint to the given mxPoint and returns the new point.
rotateRotates the geometry by the given angle around the given center.
translateTranslates the geometry by the specified amount.
scaleScales the geometry by the given amount.
equalsReturns true if the given object equals this geometry.

Functions

mxGeometry

function mxGeometry(x,
y,
width,
height)

Constructs a new object to describe the size and location of a vertex or the control points of an edge.

Variables

TRANSLATE_CONTROL_POINTS

mxGeometry.prototype.TRANSLATE_CONTROL_POINTS

Global switch to translate the points in translate.  Default is true.

alternateBounds

mxGeometry.prototype.alternateBounds

Stores alternate values for x, y, width and height in a rectangle.  See swap to exchange the values.  Default is null.

sourcePoint

mxGeometry.prototype.sourcePoint

Defines the source mxPoint of the edge.  This is used if the corresponding edge does not have a source vertex.  Otherwise it is ignored.  Default is null.

targetPoint

mxGeometry.prototype.targetPoint

Defines the target mxPoint of the edge.  This is used if the corresponding edge does not have a target vertex.  Otherwise it is ignored.  Default is null.

points

mxGeometry.prototype.points

Array of mxPoints which specifies the control points along the edge.  These points are the intermediate points on the edge, for the endpoints use targetPoint and sourcePoint or set the terminals of the edge to a non-null value.  Default is null.

offset

mxGeometry.prototype.offset

For edges, this holds the offset (in pixels) from the position defined by <x> and <y> on the edge.  For relative geometries (for vertices), this defines the absolute offset from the point defined by the relative coordinates.  For absolute geometries (for vertices), this defines the offset for the label.  Default is null.

relative

mxGeometry.prototype.relative

Specifies if the coordinates in the geometry are to be interpreted as relative coordinates.  For edges, this is used to define the location of the edge label relative to the edge as rendered on the display.  For vertices, this specifies the relative location inside the bounds of the parent cell.

If this is false, then the coordinates are relative to the origin of the parent cell or, for edges, the edge label position is relative to the center of the edge as rendered on screen.

Default is false.

Functions

swap

mxGeometry.prototype.swap = function()

Swaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle.  This operation is carried-out in-place, that is, using the existing geometry instance.  If this operation is called during a graph model transactional change, then the geometry should be cloned before calling this method and setting the geometry of the cell using mxGraphModel.setGeometry.

getTerminalPoint

mxGeometry.prototype.getTerminalPoint = function(isSource)

Returns the mxPoint representing the source or target point of this edge.  This is only used if the edge has no source or target vertex.

Parameters

isSourceBoolean that specifies if the source or target point should be returned.

setTerminalPoint

mxGeometry.prototype.setTerminalPoint = function(point,
isSource)

Sets the sourcePoint or targetPoint to the given mxPoint and returns the new point.

Parameters

pointPoint to be used as the new source or target point.
isSourceBoolean that specifies if the source or target point should be set.

rotate

mxGeometry.prototype.rotate = function(angle,
cx)

Rotates the geometry by the given angle around the given center.  That is, <x> and <y> of the geometry, the sourcePoint, targetPoint and all points are translated by the given amount.  <x> and <y> are only translated if relative is false.

Parameters

angleNumber that specifies the rotation angle in degrees.
cxmxPoint that specifies the center of the rotation.

translate

mxGeometry.prototype.translate = function(dx,
dy)

Translates the geometry by the specified amount.  That is, <x> and <y> of the geometry, the sourcePoint, targetPoint and all points are translated by the given amount.  <x> and <y> are only translated if relative is false.  If TRANSLATE_CONTROL_POINTS is false, then points are not modified by this function.

Parameters

dxNumber that specifies the x-coordinate of the translation.
dyNumber that specifies the y-coordinate of the translation.

scale

mxGeometry.prototype.scale = function(sx,
sy,
fixedAspect)

Scales the geometry by the given amount.  That is, <x> and <y> of the geometry, the sourcePoint, targetPoint and all points are scaled by the given amount.  <x>, <y>, <width> and <height> are only scaled if relative is false.  If <fixedAspect> is true, then the smaller value is used to scale the width and the height.

Parameters

sxNumber that specifies the horizontal scale factor.
syNumber that specifies the vertical scale factor.
fixedAspectOptional boolean to keep the aspect ratio fixed.

equals

mxGeometry.prototype.equals = function(obj)

Returns true if the given object equals this geometry.

mxCellPath

Implements a mechanism for temporary cell Ids.

Summary
Variables
PATH_SEPARATORDefines the separator between the path components.
Functions
createCreates the cell path for the given cell.
getParentPathReturns the path for the parent of the cell represented by the given path.
resolveReturns the cell for the specified cell path using the given root as the root of the path.
compareCompares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.

Variables

PATH_SEPARATOR

Defines the separator between the path components.  Default is “.”.

Functions

create

create: function(cell)

Creates the cell path for the given cell.  The cell path is a concatenation of the indices of all ancestors on the (finite) path to the root, eg.  “0.0.0.1”.

Parameters

cellCell whose path should be returned.

getParentPath

getParentPath: function(path)

Returns the path for the parent of the cell represented by the given path.  Returns null if the given path has no parent.

Parameters

pathPath whose parent path should be returned.

resolve

resolve: function(root,
path)

Returns the cell for the specified cell path using the given root as the root of the path.

Parameters

rootRoot cell of the path to be resolved.
pathString that defines the path.

compare

compare: function(p1,
p2)

Compares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.

mxPerimeter

Provides various perimeter functions to be used in a style as the value of mxConstants.STYLE_PERIMETER.  Perimeters for rectangle, circle, rhombus and triangle are available.

Example

<add as="perimeter">mxPerimeter.RectanglePerimeter</add>

Or programmatically

style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;

When adding new perimeter functions, it is recommended to use the mxPerimeter-namespace as follows:

mxPerimeter.CustomPerimeter = function (bounds, vertex, next, orthogonal)
{
  var x = 0; // Calculate x-coordinate
  var y = 0; // Calculate y-coordainte

  return new mxPoint(x, y);
}

The new perimeter should then be registered in the mxStyleRegistry as follows

mxStyleRegistry.putValue('customPerimeter', mxPerimeter.CustomPerimeter);

The custom perimeter above can now be used in a specific vertex as follows

model.setStyle(vertex, 'perimeter=customPerimeter');

Note that the key of the mxStyleRegistry entry for the function should be used in string values, unless mxGraphView.allowEval is true, in which case you can also use mxPerimeter.CustomPerimeter for the value in the cell style above.

Or it can be used for all vertices in the graph as follows

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.CustomPerimeter;

Note that the object can be used directly when programmatically setting the value, but the key in the mxStyleRegistry should be used when setting the value via a key, value pair in a cell style.

The parameters are explained in RectanglePerimeter.

Summary
Functions
RectanglePerimeterDescribes a rectangular perimeter for the given bounds.
EllipsePerimeterDescribes an elliptic perimeter.
RhombusPerimeterDescribes a rhombus (aka diamond) perimeter.
TrianglePerimeterDescribes a triangle perimeter.
HexagonPerimeterDescribes a hexagon perimeter.

Functions

RectanglePerimeter

RectanglePerimeter: function (bounds,
vertex,
next,
orthogonal)

Describes a rectangular perimeter for the given bounds.

Parameters

boundsmxRectangle that represents the absolute bounds of the vertex.
vertexmxCellState that represents the vertex.
nextmxPoint that represents the nearest neighbour point on the given edge.
orthogonalBoolean that specifies if the orthogonal projection onto the perimeter should be returned.  If this is false then the intersection of the perimeter and the line between the next and the center point is returned.

EllipsePerimeter

EllipsePerimeter: function (bounds,
vertex,
next,
orthogonal)

Describes an elliptic perimeter.  See RectanglePerimeter for a description of the parameters.

RhombusPerimeter

RhombusPerimeter: function (bounds,
vertex,
next,
orthogonal)

Describes a rhombus (aka diamond) perimeter.  See RectanglePerimeter for a description of the parameters.

TrianglePerimeter

TrianglePerimeter: function (bounds,
vertex,
next,
orthogonal)

Describes a triangle perimeter.  See RectanglePerimeter for a description of the parameters.

HexagonPerimeter

HexagonPerimeter: function (bounds,
vertex,
next,
orthogonal)

Describes a hexagon perimeter.  See RectanglePerimeter for a description of the parameters.

mxPrintPreview

Implements printing of a diagram across multiple pages.  The following opens a print preview for an existing graph:

var preview = new mxPrintPreview(graph);
preview.open();

Use mxUtils.getScaleForPageCount as follows in order to print the graph across a given number of pages:

var pageCount = mxUtils.prompt('Enter page count', '1');

if (pageCount != null)
{
  var scale = mxUtils.getScaleForPageCount(pageCount, graph);
  var preview = new mxPrintPreview(graph, scale);
  preview.open();
}

Additional pages

To add additional pages before and after the output, getCoverPages and getAppendices can be used, respectively.

var preview = new mxPrintPreview(graph, 1);

preview.getCoverPages = function(w, h)
{
  return [this.renderPage(w, h, 0, 0, mxUtils.bind(this, function(div)
  {
    div.innerHTML = '<div style="position:relative;margin:4px;">Cover Page</p>'
  }))];
};

preview.getAppendices = function(w, h)
{
  return [this.renderPage(w, h, 0, 0, mxUtils.bind(this, function(div)
  {
    div.innerHTML = '<div style="position:relative;margin:4px;">Appendix</p>'
  }))];
};

preview.open();

CSS

The CSS from the original page is not carried over to the print preview.  To add CSS to the page, use the css argument in the open function or override writeHead to add the respective link tags as follows:

var writeHead = preview.writeHead;
preview.writeHead = function(doc, css)
{
  writeHead.apply(this, arguments);
  doc.writeln('<link rel="stylesheet" type="text/css" href="style.css">');
};

Padding

To add a padding to the page in the preview (but not the print output), use the following code:

preview.writeHead = function(doc)
{
  writeHead.apply(this, arguments);

  doc.writeln('<style type="text/css">');
  doc.writeln('@media screen {');
  doc.writeln('  body > div { padding-top:30px;padding-left:40px;box-sizing:content-box; }');
  doc.writeln('}');
  doc.writeln('</style>');
};

Headers

Apart from setting the title argument in the mxPrintPreview constructor you can override renderPage as follows to add a header to any page:

var oldRenderPage = mxPrintPreview.prototype.renderPage;
mxPrintPreview.prototype.renderPage = function(w, h, x, y, content, pageNumber)
{
  var div = oldRenderPage.apply(this, arguments);

  var header = document.createElement('div');
  header.style.position = 'absolute';
  header.style.top = '0px';
  header.style.width = '100%';
  header.style.textAlign = 'right';
  mxUtils.write(header, 'Your header here');
  div.firstChild.appendChild(header);

  return div;
};

The pageNumber argument contains the number of the current page, starting at 1.  To display a header on the first page only, check pageNumber and add a vertical offset in the constructor call for the height of the header.

Page Format

For landscape printing, use <mxConstants.PAGE_FORMAT_A4_LANDSCAPE> as the pageFormat in mxUtils.getScaleForPageCount and mxPrintPreview.  Keep in mind that one can not set the defaults for the print dialog of the operating system from JavaScript so the user must manually choose a page format that matches this setting.

You can try passing the following CSS directive to open to set the page format in the print dialog to landscape.  However, this CSS directive seems to be ignored in most major browsers, including IE.

@page {
  size: landscape;
}

Note that the print preview behaves differently in IE when used from the filesystem or via HTTP so printing should always be tested via HTTP.

If you are using a DOCTYPE in the source page you can override <getDoctype> and provide the same DOCTYPE for the print preview if required.  Here is an example for IE8 standards mode.

var preview = new mxPrintPreview(graph);
preview.getDoctype = function()
{
  return '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=8" ><![endif]-->';
};
preview.open();
Summary
Functions
mxPrintPreviewConstructs a new print preview for the given parameters.
Variables
graphReference to the mxGraph that should be previewed.
pageFormatHolds the mxRectangle that defines the page format.
scaleHolds the scale of the print preview.
borderThe border inset around each side of every page in the preview.
marginTopThe margin at the top of the page (number).
marginBottomThe margin at the bottom of the page (number).
x0Holds the horizontal offset of the output.
y0Holds the vertical offset of the output.
autoOriginSpecifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
printOverlaysSpecifies if overlays should be printed.
printControlsSpecifies if controls (such as folding icons) should be printed.
printBackgroundImageSpecifies if the background image should be printed.
backgroundColorHolds the color value for the page background color.
borderColorHolds the color value for the page border.
titleHolds the title of the preview window.
pageSelectorBoolean that specifies if the page selector should be displayed.
wndReference to the preview window.
targetWindowAssign any window here to redirect the rendering in open.
pageCountHolds the actual number of pages in the preview.
clippingSpecifies is clipping should be used to avoid creating too many cell states in large diagrams.
Functions
getWindowReturns wnd.
getDocTypeReturns the string that should go before the HTML tag in the print preview page.
appendGraphAdds the given graph to the existing print preview.
openShows the print preview window.
addPageBreakAdds a page break to the given document.
closeDocumentWrites the closing tags for body and page after calling writePostfix.
writeHeadWrites the HEAD section into the given document, without the opening and closing HEAD tags.
writePostfixCalled before closing the body of the page.
createPageSelectorCreates the page selector table.
renderPageCreates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
getRootReturns the root cell for painting the graph.
addGraphFragmentAdds a graph fragment to the given div.
getLinkForCellStateReturns the link for the given cell state.
insertBackgroundImageInserts the background image into the given div.
getCoverPagesReturns the pages to be added before the print output.
getAppendicesReturns the pages to be added after the print output.
printOpens the print preview and shows the print dialog.
closeCloses the print preview window.

Functions

mxPrintPreview

function mxPrintPreview(graph,
scale,
pageFormat,
border,
x0,
y0,
borderColor,
title,
pageSelector)

Constructs a new print preview for the given parameters.

Parameters

graphmxGraph to be previewed.
scaleOptional scale of the output.  Default is 1 / mxGraph.pageScale.
borderBorder in pixels along each side of every page.  Note that the actual print function in the browser will add another border for printing.
pageFormatmxRectangle that specifies the page format (in pixels).  This should match the page format of the printer.  Default uses the mxGraph.pageFormat of the given graph.
x0Optional left offset of the output.  Default is 0.
y0Optional top offset of the output.  Default is 0.
borderColorOptional color of the page border.  Default is no border.  Note that a border is sometimes useful to highlight the printed page border in the print preview of the browser.
titleOptional string that is used for the window title.  Default is ‘Printer-friendly version’.
pageSelectorOptional boolean that specifies if the page selector should appear in the window with the print preview.  Default is true.

Variables

graph

mxPrintPreview.prototype.graph

Reference to the mxGraph that should be previewed.

pageFormat

mxPrintPreview.prototype.pageFormat

Holds the mxRectangle that defines the page format.

scale

mxPrintPreview.prototype.scale

Holds the scale of the print preview.

border

mxPrintPreview.prototype.border

The border inset around each side of every page in the preview.  This is set to 0 if autoOrigin is false.

marginTop

mxPrintPreview.prototype.marginTop

The margin at the top of the page (number).  Default is 0.

marginBottom

mxPrintPreview.prototype.marginBottom

The margin at the bottom of the page (number).  Default is 0.

x0

mxPrintPreview.prototype.x0

Holds the horizontal offset of the output.

y0

mxPrintPreview.prototype.y0

Holds the vertical offset of the output.

autoOrigin

mxPrintPreview.prototype.autoOrigin

Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.  The required offset will be added to x0 and y0 in open.  Default is true.

printOverlays

mxPrintPreview.prototype.printOverlays

Specifies if overlays should be printed.  Default is false.

printControls

mxPrintPreview.prototype.printControls

Specifies if controls (such as folding icons) should be printed.  Default is false.

printBackgroundImage

mxPrintPreview.prototype.printBackgroundImage

Specifies if the background image should be printed.  Default is false.

backgroundColor

mxPrintPreview.prototype.backgroundColor

Holds the color value for the page background color.  Default is #ffffff.

borderColor

mxPrintPreview.prototype.borderColor

Holds the color value for the page border.

title

mxPrintPreview.prototype.title

Holds the title of the preview window.

pageSelector

mxPrintPreview.prototype.pageSelector

Boolean that specifies if the page selector should be displayed.  Default is true.

wnd

mxPrintPreview.prototype.wnd

Reference to the preview window.

targetWindow

mxPrintPreview.prototype.targetWindow

Assign any window here to redirect the rendering in open.

pageCount

mxPrintPreview.prototype.pageCount

Holds the actual number of pages in the preview.

clipping

mxPrintPreview.prototype.clipping

Specifies is clipping should be used to avoid creating too many cell states in large diagrams.  The bounding box of the cells in the original diagram is used if this is enabled.  Default is true.

Functions

getWindow

mxPrintPreview.prototype.getWindow = function()

Returns wnd.

getDocType

Returns the string that should go before the HTML tag in the print preview page.  This implementation returns an X-UA meta tag for IE5 in quirks mode, IE8 in IE8 standards mode and edge in IE9 standards mode.

appendGraph

mxPrintPreview.prototype.appendGraph = function(graph,
scale,
x0,
y0,
forcePageBreaks,
keepOpen)

Adds the given graph to the existing print preview.

Parameters

cssOptional CSS string to be used in the head section.
targetWindowOptional window that should be used for rendering.  If this is specified then no HEAD tag, CSS and BODY tag will be written.

open

mxPrintPreview.prototype.open = function(css,
targetWindow,
forcePageBreaks,
keepOpen)

Shows the print preview window.  The window is created here if it does not exist.

Parameters

cssOptional CSS string to be used in the head section.
targetWindowOptional window that should be used for rendering.  If this is specified then no HEAD tag, CSS and BODY tag will be written.

addPageBreak

mxPrintPreview.prototype.addPageBreak = function(doc)

Adds a page break to the given document.

closeDocument

mxPrintPreview.prototype.closeDocument = function()

Writes the closing tags for body and page after calling writePostfix.

writeHead

mxPrintPreview.prototype.writeHead = function(doc,
css)

Writes the HEAD section into the given document, without the opening and closing HEAD tags.

writePostfix

mxPrintPreview.prototype.writePostfix = function(doc)

Called before closing the body of the page.  This implementation is empty.

createPageSelector

mxPrintPreview.prototype.createPageSelector = function(vpages,
hpages)

Creates the page selector table.

renderPage

mxPrintPreview.prototype.renderPage = function(w,
h,
dx,
dy,
content,
pageNumber)

Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.

Parameters

wWidth of the page in pixels.
hHeight of the page in pixels.
dxOptional horizontal page offset in pixels (used internally).
dyOptional vertical page offset in pixels (used internally).
contentCallback that adds the HTML content to the inner div of a page.  Takes the inner div as the argument.
pageNumberInteger representing the page number.

getRoot

mxPrintPreview.prototype.getRoot = function()

Returns the root cell for painting the graph.

addGraphFragment

mxPrintPreview.prototype.addGraphFragment = function(dx,
dy,
scale,
pageNumber,
div,
clip)

Adds a graph fragment to the given div.

Parameters

dxHorizontal translation for the diagram.
dyVertical translation for the diagram.
scaleScale for the diagram.
pageNumberNumber of the page to be rendered.
divDiv that contains the output.
clipContains the clipping rectangle as an mxRectangle.

getLinkForCellState

mxPrintPreview.prototype.getLinkForCellState = function(state)

Returns the link for the given cell state.  This returns null.

insertBackgroundImage

mxPrintPreview.prototype.insertBackgroundImage = function(div,
dx,
dy)

Inserts the background image into the given div.

getCoverPages

mxPrintPreview.prototype.getCoverPages = function()

Returns the pages to be added before the print output.  This returns null.

getAppendices

mxPrintPreview.prototype.getAppendices = function()

Returns the pages to be added after the print output.  This returns null.

print

mxPrintPreview.prototype.print = function(css)

Opens the print preview and shows the print dialog.

Parameters

cssOptional CSS string to be used in the head section.

close

mxPrintPreview.prototype.close = function()

Closes the print preview window.

mxStylesheet

Defines the appearance of the cells in a graph.  See putCellStyle for an example of creating a new cell style.  It is recommended to use objects, not arrays for holding cell styles.  Existing styles can be cloned using mxUtils.clone and turned into a string for debugging using mxUtils.toString.

Default Styles

The stylesheet contains two built-in styles, which are used if no style is defined for a cell:

defaultVertexDefault style for vertices
defaultEdgeDefault style for edges

Example

var vertexStyle = stylesheet.getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = stylesheet.getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;

Modifies the built-in default styles.

To avoid the default style for a cell, add a leading semicolon to the style definition, eg.

;shadow=1

Removing keys

For removing a key in a cell style of the form [stylename;|key=value;] the special value none can be used, eg. highlight;fillColor=none

See also the helper methods in mxUtils to modify strings of this format, namely mxUtils.setStyle, mxUtils.indexOfStylename, mxUtils.addStylename, mxUtils.removeStylename, mxUtils.removeAllStylenames and mxUtils.setStyleFlag.

Summary
Functions
mxStylesheetConstructs a new stylesheet and assigns default styles.
stylesMaps from names to cell styles.
createDefaultVertexStyleCreates and returns the default vertex style.
createDefaultEdgeStyleCreates and returns the default edge style.
putDefaultVertexStyleSets the default style for vertices using defaultVertex as the stylename.
putDefaultEdgeStyleSets the default style for edges using defaultEdge as the stylename.
getDefaultVertexStyleReturns the default style for vertices.
getDefaultEdgeStyleSets the default style for edges.
putCellStyleStores the given map of key, value pairs under the given name in styles.
getCellStyleReturns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.

Functions

mxStylesheet

function mxStylesheet()

Constructs a new stylesheet and assigns default styles.

styles

Maps from names to cell styles.  Each cell style is a map of key, value pairs.

createDefaultVertexStyle

mxStylesheet.prototype.createDefaultVertexStyle = function()

Creates and returns the default vertex style.

createDefaultEdgeStyle

mxStylesheet.prototype.createDefaultEdgeStyle = function()

Creates and returns the default edge style.

putDefaultVertexStyle

mxStylesheet.prototype.putDefaultVertexStyle = function(style)

Sets the default style for vertices using defaultVertex as the stylename.

Parameters

styleKey, value pairs that define the style.

putDefaultEdgeStyle

mxStylesheet.prototype.putDefaultEdgeStyle = function(style)

Sets the default style for edges using defaultEdge as the stylename.

getDefaultVertexStyle

mxStylesheet.prototype.getDefaultVertexStyle = function()

Returns the default style for vertices.

getDefaultEdgeStyle

mxStylesheet.prototype.getDefaultEdgeStyle = function()

Sets the default style for edges.

putCellStyle

mxStylesheet.prototype.putCellStyle = function(name,
style)

Stores the given map of key, value pairs under the given name in styles.

Example

The following example adds a new style called ‘rounded’ into an existing stylesheet:

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ROUNDED] = true;
graph.getStylesheet().putCellStyle('rounded', style);

In the above example, the new style is an object.  The possible keys of the object are all the constants in mxConstants that start with STYLE and the values are either JavaScript objects, such as <mxPerimeter.RightAngleRectanglePerimeter> (which is in fact a function) or expressions, such as true.  Note that not all keys will be interpreted by all shapes (eg. the line shape ignores the fill color).  The final call to this method associates the style with a name in the stylesheet.  The style is used in a cell with the following code:

model.setStyle(cell, 'rounded');

Parameters

nameName for the style to be stored.
styleKey, value pairs that define the style.

getCellStyle

mxStylesheet.prototype.getCellStyle = function(name,
defaultStyle)

Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.

Parameters

nameString of the form [(stylename|key=value);] that represents the style.
defaultStyleDefault style to be returned if no style can be found.

mxCellState

Represents the current state of a cell in a given mxGraphView.

For edges, the edge label position is stored in absoluteOffset.

The size for oversize labels can be retrieved using the boundingBox property of the text field as shown below.

var bbox = (state.text != null) ? state.text.boundingBox : null;
Summary
Functions
mxCellStateConstructs a new object that represents the current state of the given cell in the specified view.
Variables
viewReference to the enclosing mxGraphView.
cellReference to the mxCell that is represented by this state.
styleContains an array of key, value pairs that represent the style of the cell.
invalidStyleSpecifies if the style is invalid.
invalidSpecifies if the state is invalid.
originmxPoint that holds the origin for all child cells.
absolutePointsHolds an array of mxPoints that represent the absolute points of an edge.
absoluteOffsetmxPoint that holds the absolute offset.
visibleSourceStateCaches the visible source terminal state.
visibleTargetStateCaches the visible target terminal state.
terminalDistanceCaches the distance between the end points for an edge.
lengthCaches the length of an edge.
segmentsArray of numbers that represent the cached length of each segment of the edge.
shapeHolds the mxShape that represents the cell graphically.
textHolds the mxText that represents the label of the cell.
unscaledWidthHolds the unscaled width of the state.
Functions
getPerimeterBoundsReturns the mxRectangle that should be used as the perimeter of the cell.
setAbsoluteTerminalPointSets the first or last point in absolutePoints depending on isSource.
setCursorSets the given cursor on the shape and text shape.
getVisibleTerminalReturns the visible source or target terminal cell.
getVisibleTerminalStateReturns the visible source or target terminal state.
setVisibleTerminalStateSets the visible source or target terminal state.
getCellBoundsReturns the unscaled, untranslated bounds.
getPaintBoundsReturns the unscaled, untranslated paint bounds.
updateCachedBoundsUpdates the cellBounds and paintBounds.
setStateCopies all fields from the given state to this state.
cloneReturns a clone of this mxPoint.
destroyDestroys the state and all associated resources.

Functions

mxCellState

function mxCellState(view,
cell,
style)

Constructs a new object that represents the current state of the given cell in the specified view.

Parameters

viewmxGraphView that contains the state.
cellmxCell that this state represents.
styleArray of key, value pairs that constitute the style.

Variables

view

mxCellState.prototype.view

Reference to the enclosing mxGraphView.

cell

mxCellState.prototype.cell

Reference to the mxCell that is represented by this state.

style

mxCellState.prototype.style

Contains an array of key, value pairs that represent the style of the cell.

invalidStyle

mxCellState.prototype.invalidStyle

Specifies if the style is invalid.  Default is false.

invalid

mxCellState.prototype.invalid

Specifies if the state is invalid.  Default is true.

origin

mxCellState.prototype.origin

mxPoint that holds the origin for all child cells.  Default is a new empty mxPoint.

absolutePoints

mxCellState.prototype.absolutePoints

Holds an array of mxPoints that represent the absolute points of an edge.

absoluteOffset

mxCellState.prototype.absoluteOffset

mxPoint that holds the absolute offset.  For edges, this is the absolute coordinates of the label position.  For vertices, this is the offset of the label relative to the top, left corner of the vertex.

visibleSourceState

mxCellState.prototype.visibleSourceState

Caches the visible source terminal state.

visibleTargetState

mxCellState.prototype.visibleTargetState

Caches the visible target terminal state.

terminalDistance

mxCellState.prototype.terminalDistance

Caches the distance between the end points for an edge.

length

mxCellState.prototype.length

Caches the length of an edge.

segments

mxCellState.prototype.segments

Array of numbers that represent the cached length of each segment of the edge.

shape

mxCellState.prototype.shape

Holds the mxShape that represents the cell graphically.

text

mxCellState.prototype.text

Holds the mxText that represents the label of the cell.  Thi smay be null if the cell has no label.

unscaledWidth

mxCellState.prototype.unscaledWidth

Holds the unscaled width of the state.

Functions

getPerimeterBounds

mxCellState.prototype.getPerimeterBounds = function(border,
bounds)

Returns the mxRectangle that should be used as the perimeter of the cell.

Parameters

borderOptional border to be added around the perimeter bounds.
boundsOptional mxRectangle to be used as the initial bounds.

setAbsoluteTerminalPoint

mxCellState.prototype.setAbsoluteTerminalPoint = function(point,
isSource)

Sets the first or last point in absolutePoints depending on isSource.

Parameters

pointmxPoint that represents the terminal point.
isSourceBoolean that specifies if the first or last point should be assigned.

setCursor

mxCellState.prototype.setCursor = function(cursor)

Sets the given cursor on the shape and text shape.

getVisibleTerminal

mxCellState.prototype.getVisibleTerminal = function(source)

Returns the visible source or target terminal cell.

Parameters

sourceBoolean that specifies if the source or target cell should be returned.

getVisibleTerminalState

mxCellState.prototype.getVisibleTerminalState = function(source)

Returns the visible source or target terminal state.

Parameters

sourceBoolean that specifies if the source or target state should be returned.

setVisibleTerminalState

mxCellState.prototype.setVisibleTerminalState = function(terminalState,
source)

Sets the visible source or target terminal state.

Parameters

terminalStatemxCellState that represents the terminal.
sourceBoolean that specifies if the source or target state should be set.

getCellBounds

mxCellState.prototype.getCellBounds = function()

Returns the unscaled, untranslated bounds.

getPaintBounds

mxCellState.prototype.getPaintBounds = function()

Returns the unscaled, untranslated paint bounds.  This is the same as getCellBounds but with a 90 degree rotation if the shape’s isPaintBoundsInverted returns true.

updateCachedBounds

mxCellState.prototype.updateCachedBounds = function()

Updates the cellBounds and paintBounds.

setState

mxCellState.prototype.setState = function(state)

Copies all fields from the given state to this state.

clone

mxCellState.prototype.clone = function()

Returns a clone of this mxPoint.

destroy

mxCellState.prototype.destroy = function()

Destroys the state and all associated resources.

mxGraphSelectionModel

Implements the selection model for a graph.  Here is a listener that handles all removed selection cells.

graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
{
  var cells = evt.getProperty('added');

  for (var i = 0; i < cells.length; i++)
  {
    // Handle cells[i]...
  }
});
Summary
Events
mxEvent.UNDOFires after the selection was changed in changeSelection.
mxEvent.CHANGEFires after the selection changes by executing an mxSelectionChange.
Functions
mxGraphSelectionModelConstructs a new graph selection model for the given mxGraph.
Variables
doneResourceSpecifies the resource key for the status message after a long operation.
updatingSelectionResourceSpecifies the resource key for the status message while the selection is being updated.
graphReference to the enclosing mxGraph.
singleSelectionSpecifies if only one selected item at a time is allowed.
Functions
isSingleSelectionReturns singleSelection as a boolean.
setSingleSelectionSets the singleSelection flag.
isSelectedReturns true if the given mxCell is selected.
isEmptyReturns true if no cells are currently selected.
clearClears the selection and fires a <change> event if the selection was not empty.
setCellSelects the specified mxCell using setCells.
setCellsSelects the given array of mxCells and fires a <change> event.
getFirstSelectableCellReturns the first selectable cell in the given array of cells.
addCellAdds the given mxCell to the selection and fires a <select> event.
addCellsAdds the given array of mxCells to the selection and fires a <select> event.
removeCellRemoves the specified mxCell from the selection and fires a <select> event for the remaining cells.
removeCells
changeSelectionInner callback to add the specified mxCell to the selection.
cellAddedInner callback to add the specified mxCell to the selection.
cellRemovedInner callback to remove the specified mxCell from the selection.

Events

mxEvent.UNDO

Fires after the selection was changed in changeSelection.  The <code>edit</code> property contains the mxUndoableEdit which contains the mxSelectionChange.

mxEvent.CHANGE

Fires after the selection changes by executing an mxSelectionChange.  The <code>added</code> and <code>removed</code> properties contain arrays of cells that have been added to or removed from the selection, respectively.  The names are inverted due to historic reasons.  This cannot be changed.

Functions

mxGraphSelectionModel

function mxGraphSelectionModel(graph)

Constructs a new graph selection model for the given mxGraph.

Parameters

graphReference to the enclosing mxGraph.

Variables

doneResource

mxGraphSelectionModel.prototype.doneResource

Specifies the resource key for the status message after a long operation.  If the resource for this key does not exist then the value is used as the status message.  Default is ‘done’.

updatingSelectionResource

mxGraphSelectionModel.prototype.updatingSelectionResource

Specifies the resource key for the status message while the selection is being updated.  If the resource for this key does not exist then the value is used as the status message.  Default is ‘updatingSelection’.

graph

mxGraphSelectionModel.prototype.graph

Reference to the enclosing mxGraph.

singleSelection

mxGraphSelectionModel.prototype.singleSelection

Specifies if only one selected item at a time is allowed.  Default is false.

Functions

isSingleSelection

mxGraphSelectionModel.prototype.isSingleSelection = function()

Returns singleSelection as a boolean.

setSingleSelection

mxGraphSelectionModel.prototype.setSingleSelection = function(singleSelection)

Sets the singleSelection flag.

Parameters

singleSelectionBoolean that specifies the new value for singleSelection.

isSelected

mxGraphSelectionModel.prototype.isSelected = function(cell)

Returns true if the given mxCell is selected.

isEmpty

mxGraphSelectionModel.prototype.isEmpty = function()

Returns true if no cells are currently selected.

clear

mxGraphSelectionModel.prototype.clear = function()

Clears the selection and fires a <change> event if the selection was not empty.

setCell

mxGraphSelectionModel.prototype.setCell = function(cell)

Selects the specified mxCell using setCells.

Parameters

cellmxCell to be selected.

setCells

mxGraphSelectionModel.prototype.setCells = function(cells)

Selects the given array of mxCells and fires a <change> event.

Parameters

cellsArray of mxCells to be selected.

getFirstSelectableCell

mxGraphSelectionModel.prototype.getFirstSelectableCell = function(cells)

Returns the first selectable cell in the given array of cells.

addCell

mxGraphSelectionModel.prototype.addCell = function(cell)

Adds the given mxCell to the selection and fires a <select> event.

Parameters

cellmxCell to add to the selection.

addCells

mxGraphSelectionModel.prototype.addCells = function(cells)

Adds the given array of mxCells to the selection and fires a <select> event.

Parameters

cellsArray of mxCells to add to the selection.

removeCell

mxGraphSelectionModel.prototype.removeCell = function(cell)

Removes the specified mxCell from the selection and fires a <select> event for the remaining cells.

Parameters

cellmxCell to remove from the selection.

removeCells

mxGraphSelectionModel.prototype.removeCells = function(cells)

changeSelection

mxGraphSelectionModel.prototype.changeSelection = function(added,
removed)

Inner callback to add the specified mxCell to the selection.  No event is fired in this implementation.

Paramters

cellmxCell to add to the selection.

cellAdded

mxGraphSelectionModel.prototype.cellAdded = function(cell)

Inner callback to add the specified mxCell to the selection.  No event is fired in this implementation.

Paramters

cellmxCell to add to the selection.

cellRemoved

mxGraphSelectionModel.prototype.cellRemoved = function(cell)

Inner callback to remove the specified mxCell from the selection.  No event is fired in this implementation.

Parameters

cellmxCell to remove from the selection.

mxSelectionChange

Action to change the current root in a view.

Summary
Functions
mxCurrentRootChangeConstructs a change of the current root in the given view.
executeChanges the current root of the view.

Functions

mxCurrentRootChange

Constructs a change of the current root in the given view.

execute

mxSelectionChange.prototype.execute = function()

Changes the current root of the view.

mxCellEditor

In-place editor for the graph.  To control this editor, use mxGraph.invokesStopCellEditing, mxGraph.enterStopsCellEditing and mxGraph.escapeEnabled.  If mxGraph.enterStopsCellEditing is true then ctrl-enter or shift-enter can be used to create a linefeed.  The F2 and escape keys can always be used to stop editing.

To customize the location of the textbox in the graph, override getEditorBounds as follows:

graph.cellEditor.getEditorBounds = function(state)
{
  var result = mxCellEditor.prototype.getEditorBounds.apply(this, arguments);

  if (this.graph.getModel().isEdge(state.cell))
  {
    result.x = state.getCenterX() - result.width / 2;
    result.y = state.getCenterY() - result.height / 2;
  }

  return result;
};

Note that this hook is only called if autoSize is false.  If autoSize is true, then mxShape.getLabelBounds is used to compute the current bounds of the textbox.

The textarea uses the mxCellEditor CSS class.  You can modify this class in your custom CSS.  Note: You should modify the CSS after loading the client in the page.

Example

To only allow numeric input in the in-place editor, use the following code.

var text = graph.cellEditor.textarea;

mxEvent.addListener(text, 'keydown', function (evt)
{
  if (!(evt.keyCode >= 48 && evt.keyCode <= 57) &&
      !(evt.keyCode >= 96 && evt.keyCode <= 105))
  {
    mxEvent.consume(evt);
  }
});

Placeholder

To implement a placeholder for cells without a label, use the emptyLabelText variable.

Resize in Chrome

Resize of the textarea is disabled by default.  If you want to enable this feature extend init and set this.textarea.style.resize = ‘’.

To start editing on a key press event, the container of the graph should have focus or a focusable parent should be used to add the key press handler as follows.

mxEvent.addListener(graph.container, 'keypress', mxUtils.bind(this, function(evt)
{
  if (!graph.isEditing() && !graph.isSelectionEmpty() && evt.which !== 0 &&
      !mxEvent.isAltDown(evt) && !mxEvent.isControlDown(evt) && !mxEvent.isMetaDown(evt))
  {
    graph.startEditing();

    if (mxClient.IS_FF)
    {
      graph.cellEditor.textarea.value = String.fromCharCode(evt.which);
    }
  }
}));

To allow focus for a DIV, and hence to receive key press events, some browsers require it to have a valid tabindex attribute.  In this case the following code may be used to keep the container focused.

var graphFireMouseEvent = graph.fireMouseEvent;
graph.fireMouseEvent = function(evtName, me, sender)
{
  if (evtName == mxEvent.MOUSE_DOWN)
  {
    this.container.focus();
  }

  graphFireMouseEvent.apply(this, arguments);
};
Summary
Functions
mxCellEditorConstructs a new in-place editor for the specified graph.
Variables
graphReference to the enclosing mxGraph.
textareaHolds the DIV that is used for text editing.
editingCellReference to the mxCell that is currently being edited.
triggerReference to the event that was used to start editing.
modifiedSpecifies if the label has been modified.
autoSizeSpecifies if the textarea should be resized while the text is being edited.
selectTextSpecifies if the text should be selected when editing starts.
emptyLabelTextText to be displayed for empty labels.
escapeCancelsEditingIf true, pressing the escape key will stop editing and not accept the new value.
textNodeReference to the label DOM node that has been hidden.
zIndexSpecifies the zIndex for the textarea.
minResizeDefines the minimum width and height to be used in resize.
wordWrapPaddingCorrection factor for word wrapping width.
blurEnabledIf focusLost should be called if textarea loses the focus.
initialValueHolds the initial editing value to check if the current value was modified.
alignHolds the current temporary horizontal alignment for the cell style.
Functions
initCreates the textarea and installs the event listeners.
applyValueCalled in stopEditing if cancel is false to invoke mxGraph.labelChanged.
setAlignSets the temporary horizontal alignment for the current editing session.
getInitialValueGets the initial editing value for the given cell.
getCurrentValueReturns the current editing value.
isCancelEditingKeyEventReturns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
installListenersInstalls listeners for focus, change and standard key event handling.
isStopEditingEventReturns true if the given keydown event should stop cell editing.
isEventSourceReturns true if this editor is the source for the given native event.
resizeReturns modified.
focusLostCalled if the textarea has lost focus.
getBackgroundColorReturns the background color for the in-place editor.
isLegacyEditorReturns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.
startEditingStarts the editor for the given cell.
isSelectTextReturns selectText.
isSelectTextReturns selectText.
stopEditingStops the editor and applies the value if cancel is false.
prepareTextareaPrepares the textarea for getting its value in stopEditing.
isHideLabelReturns true if the label should be hidden while the cell is being edited.
getMinimumSizeReturns the minimum width and height for editing the given state.
getEditorBoundsReturns the mxRectangle that defines the bounds of the editor.
getEmptyLabelTextReturns the initial label value to be used of the label of the given cell is empty.
getEditingCellReturns the cell that is currently being edited or null if no cell is being edited.
destroyDestroys the editor and removes all associated resources.

Functions

mxCellEditor

function mxCellEditor(graph)

Constructs a new in-place editor for the specified graph.

Parameters

graphReference to the enclosing mxGraph.

Variables

graph

mxCellEditor.prototype.graph

Reference to the enclosing mxGraph.

textarea

mxCellEditor.prototype.textarea

Holds the DIV that is used for text editing.  Note that this may be null before the first edit.  Instantiated in init.

editingCell

mxCellEditor.prototype.editingCell

Reference to the mxCell that is currently being edited.

trigger

mxCellEditor.prototype.trigger

Reference to the event that was used to start editing.

modified

mxCellEditor.prototype.modified

Specifies if the label has been modified.

autoSize

mxCellEditor.prototype.autoSize

Specifies if the textarea should be resized while the text is being edited.  Default is true.

selectText

mxCellEditor.prototype.selectText

Specifies if the text should be selected when editing starts.  Default is true.

emptyLabelText

mxCellEditor.prototype.emptyLabelText

Text to be displayed for empty labels.  Default is ‘’ or ‘<br>’ in Firefox as a workaround for the missing cursor bug for empty content editable.  This can be set to eg.  “[Type Here]” to easier visualize editing of empty labels.  The value is only displayed before the first keystroke and is never used as the actual editing value.

escapeCancelsEditing

mxCellEditor.prototype.escapeCancelsEditing

If true, pressing the escape key will stop editing and not accept the new value.  Change this to false to accept the new value on escape, and cancel editing on Shift+Escape instead.  Default is true.

textNode

mxCellEditor.prototype.textNode

Reference to the label DOM node that has been hidden.

zIndex

mxCellEditor.prototype.zIndex

Specifies the zIndex for the textarea.  Default is 5.

minResize

mxCellEditor.prototype.minResize

Defines the minimum width and height to be used in resize.  Default is 0x20px.

wordWrapPadding

mxCellEditor.prototype.wordWrapPadding

Correction factor for word wrapping width.  Default is 2 in quirks, 0 in IE 11 and 1 in all other browsers and modes.

blurEnabled

mxCellEditor.prototype.blurEnabled

If focusLost should be called if textarea loses the focus.  Default is false.

initialValue

mxCellEditor.prototype.initialValue

Holds the initial editing value to check if the current value was modified.

align

mxCellEditor.prototype.align

Holds the current temporary horizontal alignment for the cell style.  If this is modified then the current text alignment is changed and the cell style is updated when the value is applied.

Functions

init

mxCellEditor.prototype.init = function ()

Creates the textarea and installs the event listeners.  The key handler updates the modified state.

applyValue

mxCellEditor.prototype.applyValue = function(state,
value)

Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.

setAlign

mxCellEditor.prototype.setAlign = function (align)

Sets the temporary horizontal alignment for the current editing session.

getInitialValue

mxCellEditor.prototype.getInitialValue = function(state,
trigger)

Gets the initial editing value for the given cell.

getCurrentValue

mxCellEditor.prototype.getCurrentValue = function(state)

Returns the current editing value.

isCancelEditingKeyEvent

mxCellEditor.prototype.isCancelEditingKeyEvent = function(evt)

Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.

installListeners

mxCellEditor.prototype.installListeners = function(elt)

Installs listeners for focus, change and standard key event handling.

isStopEditingEvent

mxCellEditor.prototype.isStopEditingEvent = function(evt)

Returns true if the given keydown event should stop cell editing.  This returns true if F2 is pressed of if mxGraph.enterStopsCellEditing is true and enter is pressed without control or shift.

isEventSource

mxCellEditor.prototype.isEventSource = function(evt)

Returns true if this editor is the source for the given native event.

resize

mxCellEditor.prototype.resize = function()

Returns modified.

focusLost

mxCellEditor.prototype.focusLost = function()

Called if the textarea has lost focus.

getBackgroundColor

mxCellEditor.prototype.getBackgroundColor = function(state)

Returns the background color for the in-place editor.  This implementation always returns null.

isLegacyEditor

mxCellEditor.prototype.isLegacyEditor = function()

Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.  In these cases the text editor must use CSS position absolute to avoid an offset but it will have a less accurate line wrapping width during the text editing preview.  This implementation returns true for IE8- and quirks mode or if the CSS position of the SVG element is not absolute.

startEditing

mxCellEditor.prototype.startEditing = function(cell,
trigger)

Starts the editor for the given cell.

Parameters

cellmxCell to start editing.
triggerOptional mouse event that triggered the editor.

isSelectText

mxCellEditor.prototype.isSelectText = function()

Returns selectText.

isSelectText

Returns selectText.

stopEditing

mxCellEditor.prototype.stopEditing = function(cancel)

Stops the editor and applies the value if cancel is false.

prepareTextarea

mxCellEditor.prototype.prepareTextarea = function()

Prepares the textarea for getting its value in stopEditing.  This implementation removes the extra trailing linefeed in Firefox.

isHideLabel

mxCellEditor.prototype.isHideLabel = function(state)

Returns true if the label should be hidden while the cell is being edited.

getMinimumSize

mxCellEditor.prototype.getMinimumSize = function(state)

Returns the minimum width and height for editing the given state.

getEditorBounds

mxCellEditor.prototype.getEditorBounds = function(state)

Returns the mxRectangle that defines the bounds of the editor.

getEmptyLabelText

mxCellEditor.prototype.getEmptyLabelText = function (cell)

Returns the initial label value to be used of the label of the given cell is empty.  This label is displayed and cleared on the first keystroke.  This implementation returns emptyLabelText.

Parameters

cellmxCell for which a text for an empty editing box should be returned.

getEditingCell

mxCellEditor.prototype.getEditingCell = function ()

Returns the cell that is currently being edited or null if no cell is being edited.

destroy

mxCellEditor.prototype.destroy = function ()

Destroys the editor and removes all associated resources.

mxCellRenderer

Renders cells into a document object model.  The defaultShapes is a global map of shapename, constructor pairs that is used in all instances.  You can get a list of all available shape names using the following code.

In general the cell renderer is in charge of creating, redrawing and destroying the shape and label associated with a cell state, as well as some other graphical objects, namely controls and overlays.  The shape hieararchy in the display (ie. the hierarchy in which the DOM nodes appear in the document) does not reflect the cell hierarchy.  The shapes are a (flat) sequence of shapes and labels inside the draw pane of the graph view, with some exceptions, namely the HTML labels being placed directly inside the graph container for certain browsers.

mxLog.show();
for (var i in mxCellRenderer.defaultShapes)
{
  mxLog.debug(i);
}
Summary
Functions
mxCellRendererarrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
Variables
defaultShapesStatic array that contains the globally registered shapes which are known to all instances of this class.
defaultEdgeShapeDefines the default shape for edges.
defaultVertexShapeDefines the default shape for vertices.
defaultTextShapeDefines the default shape for labels.
legacyControlPositionSpecifies if the folding icon should ignore the horizontal orientation of a swimlane.
legacySpacingSpecifies if spacing and label position should be ignored if overflow is fill or width.
antiAliasAnti-aliasing option for new shapes.
minSvgStrokeWidthMinimum stroke width for SVG output.
forceControlClickHandlerSpecifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
Functions
registerShapeRegisters the given constructor under the specified key in this instance of the renderer.
initializeShapeInitializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
createShapeCreates and returns the shape for the given cell state.
createIndicatorShapeCreates the indicator shape for the given cell state.
getShapeReturns the shape for the given name from defaultShapes.
getShapeConstructorReturns the constructor to be used for creating the shape.
configureShapeConfigures the shape for the given cell state.
postConfigureShapeReplaces any reserved words used for attributes, eg.
checkPlaceholderStylesResolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
resolveColorResolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
getLabelValueReturns the value to be used for the label.
createLabelCreates the label for the given cell state.
initializeLabelInitiailzes the label with a suitable container.
createCellOverlaysCreates the actual shape for showing the overlay for the given cell state.
initializeOverlayInitializes the given overlay.
installOverlayListenersInstalls the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.
createControlCreates the control for the given cell state.
createControlClickHandlerHook for creating the click handler for the folding icon.
initControlInitializes the given control and returns the corresponding DOM node.
isShapeEventReturns true if the event is for the shape of the given state.
isLabelEventReturns true if the event is for the label of the given state.
installListenersInstalls the event listeners for the given cell state.
redrawLabelRedraws the label for the given cell state.
isTextShapeInvalidReturns true if the style for the text shape has changed.
redrawLabelShapeCalled to invoked redraw on the given text shape.
getTextScaleReturns the scaling used for the label of the given state
getLabelBoundsReturns the bounds to be used to draw the label of the given state.
rotateLabelBoundsAdds the shape rotation to the given label bounds and applies the alignment and offsets.
redrawCellOverlaysRedraws the overlays for the given cell state.
redrawControlRedraws the control for the given cell state.
getControlBoundsReturns the bounds to be used to draw the control (folding icon) of the given state.
insertStateAfterInserts the given array of mxShapes after the given nodes in the DOM.
getShapesForStateReturns the mxShapes for the given cell state in the order in which they should appear in the DOM.
redrawUpdates the bounds or points and scale of the shapes for the given cell state.
redrawShapeRedraws the shape for the given cell state.
doRedrawShapeInvokes redraw on the shape of the given state.
isShapeInvalidReturns true if the given shape must be repainted.
destroyDestroys the shapes associated with the given cell state.

Functions

mxCellRenderer

function mxCellRenderer()

Constructs a new cell renderer with the following built-in shapes

arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.

Variables

defaultShapes

mxCellRenderer.defaultShapes

Static array that contains the globally registered shapes which are known to all instances of this class.  For adding new shapes you should use the static mxCellRenderer.registerShape function.

defaultEdgeShape

mxCellRenderer.prototype.defaultEdgeShape

Defines the default shape for edges.  Default is mxConnector.

defaultVertexShape

mxCellRenderer.prototype.defaultVertexShape

Defines the default shape for vertices.  Default is mxRectangleShape.

defaultTextShape

mxCellRenderer.prototype.defaultTextShape

Defines the default shape for labels.  Default is mxText.

legacyControlPosition

mxCellRenderer.prototype.legacyControlPosition

Specifies if the folding icon should ignore the horizontal orientation of a swimlane.  Default is true.

legacySpacing

mxCellRenderer.prototype.legacySpacing

Specifies if spacing and label position should be ignored if overflow is fill or width.  Default is true for backwards compatiblity.

antiAlias

mxCellRenderer.prototype.antiAlias

Anti-aliasing option for new shapes.  Default is true.

minSvgStrokeWidth

mxCellRenderer.prototype.minSvgStrokeWidth

Minimum stroke width for SVG output.

forceControlClickHandler

mxCellRenderer.prototype.forceControlClickHandler

Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).  Default is false.

Functions

registerShape

mxCellRenderer.registerShape = function(key,
shape)

Registers the given constructor under the specified key in this instance of the renderer.

Example

mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);

Parameters

keyString representing the shape name.
shapeConstructor of the mxShape subclass.

initializeShape

mxCellRenderer.prototype.initializeShape = function(state)

Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.

Parameters

statemxCellState for which the shape should be initialized.

createShape

mxCellRenderer.prototype.createShape = function(state)

Creates and returns the shape for the given cell state.

Parameters

statemxCellState for which the shape should be created.

createIndicatorShape

mxCellRenderer.prototype.createIndicatorShape = function(state)

Creates the indicator shape for the given cell state.

Parameters

statemxCellState for which the indicator shape should be created.

getShape

mxCellRenderer.prototype.getShape = function(name)

Returns the shape for the given name from defaultShapes.

getShapeConstructor

mxCellRenderer.prototype.getShapeConstructor = function(state)

Returns the constructor to be used for creating the shape.

configureShape

mxCellRenderer.prototype.configureShape = function(state)

Configures the shape for the given cell state.

Parameters

statemxCellState for which the shape should be configured.

postConfigureShape

mxCellRenderer.prototype.postConfigureShape = function(state)

Replaces any reserved words used for attributes, eg. inherit, indicated or swimlane for colors in the shape for the given state.  This implementation resolves these keywords on the fill, stroke and gradient color keys.

checkPlaceholderStyles

mxCellRenderer.prototype.checkPlaceholderStyles = function(state)

Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.

resolveColor

mxCellRenderer.prototype.resolveColor = function(state,
field,
key)

Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.

getLabelValue

mxCellRenderer.prototype.getLabelValue = function(state)

Returns the value to be used for the label.

Parameters

statemxCellState for which the label should be created.

createLabel

mxCellRenderer.prototype.createLabel = function(state,
value)

Creates the label for the given cell state.

Parameters

statemxCellState for which the label should be created.

initializeLabel

mxCellRenderer.prototype.initializeLabel = function(state,
shape)

Initiailzes the label with a suitable container.

Parameters

statemxCellState whose label should be initialized.

createCellOverlays

mxCellRenderer.prototype.createCellOverlays = function(state)

Creates the actual shape for showing the overlay for the given cell state.

Parameters

statemxCellState for which the overlay should be created.

initializeOverlay

mxCellRenderer.prototype.initializeOverlay = function(state,
overlay)

Initializes the given overlay.

Parameters

statemxCellState for which the overlay should be created.
overlaymxImageShape that represents the overlay.

installOverlayListeners

Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.

createControl

mxCellRenderer.prototype.createControl = function(state)

Creates the control for the given cell state.

Parameters

statemxCellState for which the control should be created.

createControlClickHandler

mxCellRenderer.prototype.createControlClickHandler = function(state)

Hook for creating the click handler for the folding icon.

Parameters

statemxCellState whose control click handler should be returned.

initControl

mxCellRenderer.prototype.initControl = function(state,
control,
handleEvents,
clickHandler)

Initializes the given control and returns the corresponding DOM node.

Parameters

statemxCellState for which the control should be initialized.
controlmxShape to be initialized.
handleEventsBoolean indicating if mousedown and mousemove should fire events via the graph.
clickHandlerOptional function to implement clicks on the control.

isShapeEvent

mxCellRenderer.prototype.isShapeEvent = function(state,
evt)

Returns true if the event is for the shape of the given state.  This implementation always returns true.

Parameters

statemxCellState whose shape fired the event.
evtMouse event which was fired.

isLabelEvent

mxCellRenderer.prototype.isLabelEvent = function(state,
evt)

Returns true if the event is for the label of the given state.  This implementation always returns true.

Parameters

statemxCellState whose label fired the event.
evtMouse event which was fired.

installListeners

mxCellRenderer.prototype.installListeners = function(state)

Installs the event listeners for the given cell state.

Parameters

statemxCellState for which the event listeners should be isntalled.

redrawLabel

mxCellRenderer.prototype.redrawLabel = function(state,
forced)

Redraws the label for the given cell state.

Parameters

statemxCellState whose label should be redrawn.

isTextShapeInvalid

mxCellRenderer.prototype.isTextShapeInvalid = function(state,
shape)

Returns true if the style for the text shape has changed.

Parameters

statemxCellState whose label should be checked.
shapemxText shape to be checked.

redrawLabelShape

mxCellRenderer.prototype.redrawLabelShape = function(shape)

Called to invoked redraw on the given text shape.

Parameters

shapemxText shape to be redrawn.

getTextScale

mxCellRenderer.prototype.getTextScale = function(state)

Returns the scaling used for the label of the given state

Parameters

statemxCellState whose label scale should be returned.

getLabelBounds

mxCellRenderer.prototype.getLabelBounds = function(state)

Returns the bounds to be used to draw the label of the given state.

Parameters

statemxCellState whose label bounds should be returned.

rotateLabelBounds

mxCellRenderer.prototype.rotateLabelBounds = function(state,
bounds)

Adds the shape rotation to the given label bounds and applies the alignment and offsets.

Parameters

statemxCellState whose label bounds should be rotated.
boundsmxRectangle the rectangle to be rotated.

redrawCellOverlays

mxCellRenderer.prototype.redrawCellOverlays = function(state,
forced)

Redraws the overlays for the given cell state.

Parameters

statemxCellState whose overlays should be redrawn.

redrawControl

mxCellRenderer.prototype.redrawControl = function(state,
forced)

Redraws the control for the given cell state.

Parameters

statemxCellState whose control should be redrawn.

getControlBounds

mxCellRenderer.prototype.getControlBounds = function(state,
w,
h)

Returns the bounds to be used to draw the control (folding icon) of the given state.

insertStateAfter

mxCellRenderer.prototype.insertStateAfter = function(state,
node,
htmlNode)

Inserts the given array of mxShapes after the given nodes in the DOM.

Parameters

shapesArray of mxShapes to be inserted.
nodeNode in <drawPane> after which the shapes should be inserted.
htmlNodeNode in the graph container after which the shapes should be inserted that will not go into the <drawPane> (eg.  HTML labels without foreignObjects).

getShapesForState

mxCellRenderer.prototype.getShapesForState = function(state)

Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.

Parameters

statemxCellState whose shapes should be returned.

redraw

mxCellRenderer.prototype.redraw = function(state,
force,
rendering)

Updates the bounds or points and scale of the shapes for the given cell state.  This is called in mxGraphView.validatePoints as the last step of updating all cells.

Parameters

statemxCellState for which the shapes should be updated.
forceOptional boolean that specifies if the cell should be reconfiured and redrawn without any additional checks.
renderingOptional boolean that specifies if the cell should actually be drawn into the DOM.  If this is false then redraw and/or reconfigure will not be called on the shape.

redrawShape

mxCellRenderer.prototype.redrawShape = function(state,
force,
rendering)

Redraws the shape for the given cell state.

Parameters

statemxCellState whose label should be redrawn.

doRedrawShape

mxCellRenderer.prototype.doRedrawShape = function(state)

Invokes redraw on the shape of the given state.

isShapeInvalid

mxCellRenderer.prototype.isShapeInvalid = function(state,
shape)

Returns true if the given shape must be repainted.

destroy

mxCellRenderer.prototype.destroy = function(state)

Destroys the shapes associated with the given cell state.

Parameters

statemxCellState for which the shapes should be destroyed.

mxEdgeStyle

Provides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.

Example

var style = stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;

Sets the default edge style to ElbowConnector.

Custom edge style

To write a custom edge style, a function must be added to the mxEdgeStyle object as follows:

mxEdgeStyle.MyStyle = function(state, source, target, points, result)
{
  if (source != null && target != null)
  {
    var pt = new mxPoint(target.getCenterX(), source.getCenterY());

    if (mxUtils.contains(source, pt.x, pt.y))
    {
      pt.y = source.y + source.height;
    }

    result.push(pt);
  }
};

In the above example, a right angle is created using a point on the horizontal center of the target vertex and the vertical center of the source vertex.  The code checks if that point intersects the source vertex and makes the edge straight if it does.  The point is then added into the result array, which acts as the return value of the function.

The new edge style should then be registered in the mxStyleRegistry as follows

mxStyleRegistry.putValue('myEdgeStyle', mxEdgeStyle.MyStyle);

The custom edge style above can now be used in a specific edge as follows

model.setStyle(edge, 'edgeStyle=myEdgeStyle');

Note that the key of the mxStyleRegistry entry for the function should be used in string values, unless mxGraphView.allowEval is true, in which case you can also use mxEdgeStyle.MyStyle for the value in the cell style above.

Or it can be used for all edges in the graph as follows

var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle;

Note that the object can be used directly when programmatically setting the value, but the key in the mxStyleRegistry should be used when setting the value via a key, value pair in a cell style.

Summary
Functions
EntityRelationImplements an entity relation style for edges (as used in database schema diagrams).
LoopImplements a self-reference, aka.
ElbowConnectorUses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSideImplements a vertical elbow edge.
TopToBottomImplements a horizontal elbow edge.
SegmentConnectorImplements an orthogonal edge style.
OrthConnectorImplements a local orthogonal router between the given cells.

Functions

EntityRelation

EntityRelation: function (state,
source,
target,
points,
result)

Implements an entity relation style for edges (as used in database schema diagrams).  At the time the function is called, the result array contains a placeholder (null) for the first absolute point, that is, the point where the edge and source terminal are connected.  The implementation of the style then adds all intermediate waypoints except for the last point, that is, the connection point between the edge and the target terminal.  The first ant the last point in the result array are then replaced with mxPoints that take into account the terminal’s perimeter and next point on the edge.

Parameters

statemxCellState that represents the edge to be updated.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.
pointsList of relative control points.
resultArray of mxPoints that represent the actual points of the edge.

Loop

Loop: function (state,
source,
target,
points,
result)

Implements a self-reference, aka. loop.

ElbowConnector

ElbowConnector: function (state,
source,
target,
points,
result)

Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.  SideToSide is used if horizontal is true or unspecified.  See EntityRelation for a description of the parameters.

SideToSide

SideToSide: function (state,
source,
target,
points,
result)

Implements a vertical elbow edge.  See EntityRelation for a description of the parameters.

TopToBottom

TopToBottom: function(state,
source,
target,
points,
result)

Implements a horizontal elbow edge.  See EntityRelation for a description of the parameters.

SegmentConnector

SegmentConnector: function(state,
source,
target,
hints,
result)

Implements an orthogonal edge style.  Use <mxEdgeSegmentHandler> as an interactive handler for this style.

OrthConnector

OrthConnector: function(state,
source,
target,
points,
result)

Implements a local orthogonal router between the given cells.

Parameters

statemxCellState that represents the edge to be updated.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.
pointsList of relative control points.
resultArray of mxPoints that represent the actual points of the edge.

mxStyleRegistry

Singleton class that acts as a global converter from string to object values in a style.  This is currently only used to perimeters and edge styles.

Summary
Variables
valuesMaps from strings to objects.
Functions
putValuePuts the given object into the registry under the given name.
getValueReturns the value associated with the given name.
getNameReturns the name for the given value.

Variables

values

Maps from strings to objects.

Functions

putValue

putValue: function(name,
obj)

Puts the given object into the registry under the given name.

getValue

getValue: function(name)

Returns the value associated with the given name.

getName

getName: function(value)

Returns the name for the given value.

mxGraphView

Extends mxEventSource to implement a view for a graph.  This class is in charge of computing the absolute coordinates for the relative child geometries, the points for perimeters and edge styles and keeping them cached in mxCellStates for faster retrieval.  The states are updated whenever the model or the view state (translate, scale) changes.  The scale and translate are honoured in the bounds.

Summary
Events
mxEvent.UNDOFires after the root was changed in setCurrentRoot.
mxEvent.SCALE_AND_TRANSLATEFires after the scale and translate have been changed in scaleAndTranslate.
mxEvent.SCALEFires after the scale was changed in setScale.
mxEvent.TRANSLATEFires after the translate was changed in setTranslate.
mxEvent.DOWN and mxEvent.UPFire if the current root is changed by executing an mxCurrentRootChange.
Functions
mxGraphViewConstructs a new view for the given mxGraph.
Variables
doneResourceSpecifies the resource key for the status message after a long operation.
Functions
updatingDocumentResourceSpecifies the resource key for the status message while the document is being updated.
Variables
allowEvalSpecifies if string values in cell styles should be evaluated using mxUtils.eval.
captureDocumentGestureSpecifies if a gesture should be captured when it goes outside of the graph container.
optimizeVmlReflowsSpecifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.
renderingSpecifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
graphReference to the enclosing mxGraph.
currentRootmxCell that acts as the root of the displayed cell hierarchy.
graphBoundsmxRectangle that caches the scales, translated bounds of the current view.
scaleSpecifies the scale.
translatemxPoint that specifies the current translation.
statesmxDictionary that maps from cell IDs to mxCellStates.
updateStyleSpecifies if the style should be updated in each validation step.
lastNodeDuring validation, this contains the last DOM node that was processed.
lastHtmlNodeDuring validation, this contains the last HTML DOM node that was processed.
lastForegroundNodeDuring validation, this contains the last edge’s DOM node that was processed.
lastForegroundHtmlNodeDuring validation, this contains the last edge HTML DOM node that was processed.
Functions
getGraphBoundsReturns graphBounds.
setGraphBoundsSets graphBounds.
getBoundsReturns the union of all mxCellStates for the given array of mxCells.
setCurrentRootSets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.
scaleAndTranslateSets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.
getScaleReturns the scale.
setScaleSets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
getTranslateReturns the translate.
setTranslateSets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
viewStateChangedInvoked after scale and/or translate has changed.
refreshClears the view if currentRoot is not null and revalidates.
revalidateRevalidates the complete view with all cell states.
clearRemoves the state of the given cell and all descendants if the given cell is not the current root.
invalidateInvalidates the state of the given cell, all its descendants and connected edges.
validateCalls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
getEmptyBoundsReturns the bounds for an empty graph.
getBoundingBoxReturns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
createBackgroundPageShapeCreates and returns the shape used as the background page.
validateBackgroundCalls validateBackgroundImage and validateBackgroundPage.
validateBackgroundImageValidates the background image.
validateBackgroundPageValidates the background page.
getBackgroundPageBoundsReturns the bounds for the background page.
redrawBackgroundImageUpdates the bounds and redraws the background image.
validateCellRecursively creates the cell state for the given cell if visible is true and the given cell is visible.
validateCellStateValidates and repaints the mxCellState for the given mxCell.
updateCellStateUpdates the given mxCellState.
isCellCollapsedReturns true if the children of the given cell should not be visible in the view.
updateVertexStateValidates the given cell state.
updateEdgeStateValidates the given cell state.
updateVertexLabelOffsetUpdates the absoluteOffset of the given vertex cell state.
resetValidationStateResets the current validation state.
stateValidatedInvoked when a state has been processed in <validatePoints>.
updateFixedTerminalPointsSets the initial absolute terminal points in the given state before the edge style is computed.
updateFixedTerminalPointSets the fixed source or target terminal point on the given edge.
getFixedTerminalPointReturns the fixed source or target terminal point for the given edge.
updateBoundsFromStencilUpdates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.
updatePointsUpdates the absolute points in the given state using the specified array of mxPoints as the relative points.
transformControlPointTransforms the given control point to an absolute point.
isLoopStyleEnabledReturns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.
getEdgeStyleReturns the edge style function to be used to render the given edge state.
updateFloatingTerminalPointsUpdates the terminal points in the given state after the edge style was computed for the edge.
updateFloatingTerminalPointUpdates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.
getFloatingTerminalPointReturns the floating terminal point for the given edge, start and end state, where start is the source if source is true.
getTerminalPortReturns an mxCellState that represents the source or target terminal or port for the given edge.
getPerimeterPointReturns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.
getRoutingCenterXReturns the x-coordinate of the center point for automatic routing.
getRoutingCenterYReturns the y-coordinate of the center point for automatic routing.
getPerimeterBoundsReturns the perimeter bounds for the given terminal, edge pair as an mxRectangle.
getPerimeterFunctionReturns the perimeter function for the given state.
getNextPointReturns the nearest point in the list of absolute points or the center of the opposite terminal.
getVisibleTerminalReturns the nearest ancestor terminal that is visible.
updateEdgeBoundsUpdates the given state using the bounding box of t he absolute points.
getPointReturns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
getRelativePointGets the relative point that describes the given, absolute label position for the given edge state.
updateEdgeLabelOffsetUpdates mxCellState.absoluteOffset for the given state.
getStateReturns the mxCellState for the given cell.
isRenderingReturns rendering.
setRenderingSets rendering.
isAllowEvalReturns allowEval.
setAllowEvalSets allowEval.
getStatesReturns states.
setStatesSets states.
getCellStatesReturns the mxCellStates for the given array of mxCells.
removeStateRemoves and returns the mxCellState for the given cell.
createStateCreates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.
getCanvasReturns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.
getBackgroundPaneReturns the DOM node that represents the background layer.
getDrawPaneReturns the DOM node that represents the main drawing layer.
getOverlayPaneReturns the DOM node that represents the layer above the drawing layer.
getDecoratorPaneReturns the DOM node that represents the topmost drawing layer.
isContainerEventReturns true if the event origin is one of the drawing panes or containers of the view.
isScrollEventReturns true if the event origin is one of the scrollbars of the container in IE.
initInitializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.
installListenersInstalls the required listeners in the container.
createCreates the DOM nodes for the HTML display.
updateHtmlCanvasSizeUpdates the size of the HTML canvas.
createHtmlPaneCreates and returns a drawing pane in HTML (DIV).
createCreates the DOM nodes for the VML display.
createVmlPaneCreates a drawing pane in VML (group).
createCreates and returns the DOM nodes for the SVG display.
updateContainerStyleUpdates the style of the container after installing the SVG DOM elements.
destroyDestroys the view and all its resources.

Events

mxEvent.UNDO

Fires after the root was changed in setCurrentRoot.  The <code>edit</code> property contains the mxUndoableEdit which contains the mxCurrentRootChange.

mxEvent.SCALE_AND_TRANSLATE

Fires after the scale and translate have been changed in scaleAndTranslate.  The <code>scale</code>, <code>previousScale</code>, <code>translate</code> and <code>previousTranslate</code> properties contain the new and previous scale and translate, respectively.

mxEvent.SCALE

Fires after the scale was changed in setScale.  The <code>scale</code> and <code>previousScale</code> properties contain the new and previous scale.

mxEvent.TRANSLATE

Fires after the translate was changed in setTranslate.  The <code>translate</code> and <code>previousTranslate</code> properties contain the new and previous value for translate.

mxEvent.DOWN and mxEvent.UP

Fire if the current root is changed by executing an mxCurrentRootChange.  The event name depends on the location of the root in the cell hierarchy with respect to the current root.  The <code>root</code> and <code>previous</code> properties contain the new and previous root, respectively.

Functions

mxGraphView

function mxGraphView(graph)

Constructs a new view for the given mxGraph.

Parameters

graphReference to the enclosing mxGraph.

Variables

doneResource

mxGraphView.prototype.doneResource

Specifies the resource key for the status message after a long operation.  If the resource for this key does not exist then the value is used as the status message.  Default is ‘done’.

Functions

updatingDocumentResource

Specifies the resource key for the status message while the document is being updated.  If the resource for this key does not exist then the value is used as the status message.  Default is ‘updatingDocument’.

Variables

allowEval

mxGraphView.prototype.allowEval

Specifies if string values in cell styles should be evaluated using mxUtils.eval.  This will only be used if the string values can’t be mapped to objects using mxStyleRegistry.  Default is false.  NOTE: Enabling this switch carries a possible security risk.

captureDocumentGesture

mxGraphView.prototype.captureDocumentGesture

Specifies if a gesture should be captured when it goes outside of the graph container.  Default is true.

optimizeVmlReflows

mxGraphView.prototype.optimizeVmlReflows

Specifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.  This will significantly improve rendering performance.  Default is true.

rendering

mxGraphView.prototype.rendering

Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.  Default is true.

graph

mxGraphView.prototype.graph

Reference to the enclosing mxGraph.

currentRoot

mxGraphView.prototype.currentRoot

mxCell that acts as the root of the displayed cell hierarchy.

graphBounds

mxGraphView.prototype.graphBounds

mxRectangle that caches the scales, translated bounds of the current view.

scale

mxGraphView.prototype.scale

Specifies the scale.  Default is 1 (100%).

translate

mxGraphView.prototype.translate

mxPoint that specifies the current translation.  Default is a new empty mxPoint.

states

mxGraphView.prototype.states

mxDictionary that maps from cell IDs to mxCellStates.

updateStyle

mxGraphView.prototype.updateStyle

Specifies if the style should be updated in each validation step.  If this is false then the style is only updated if the state is created or if the style of the cell was changed.  Default is false.

lastNode

mxGraphView.prototype.lastNode

During validation, this contains the last DOM node that was processed.

lastHtmlNode

mxGraphView.prototype.lastHtmlNode

During validation, this contains the last HTML DOM node that was processed.

lastForegroundNode

mxGraphView.prototype.lastForegroundNode

During validation, this contains the last edge’s DOM node that was processed.

lastForegroundHtmlNode

mxGraphView.prototype.lastForegroundHtmlNode

During validation, this contains the last edge HTML DOM node that was processed.

Functions

getGraphBounds

mxGraphView.prototype.getGraphBounds = function()

Returns graphBounds.

setGraphBounds

mxGraphView.prototype.setGraphBounds = function(value)

Sets graphBounds.

getBounds

mxGraphView.prototype.getBounds = function(cells)

Returns the union of all mxCellStates for the given array of mxCells.

Parameters

cellsArray of mxCells whose bounds should be returned.

setCurrentRoot

mxGraphView.prototype.setCurrentRoot = function(root)

Sets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.

Parameters

rootmxCell that specifies the root of the displayed cell hierarchy.

scaleAndTranslate

mxGraphView.prototype.scaleAndTranslate = function(scale,
dx,
dy)

Sets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.

Parameters

scaleDecimal value that specifies the new scale (1 is 100%).
dxX-coordinate of the translation.
dyY-coordinate of the translation.

getScale

mxGraphView.prototype.getScale = function()

Returns the scale.

setScale

mxGraphView.prototype.setScale = function(value)

Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.

Parameters

valueDecimal value that specifies the new scale (1 is 100%).

getTranslate

mxGraphView.prototype.getTranslate = function()

Returns the translate.

setTranslate

mxGraphView.prototype.setTranslate = function(dx,
dy)

Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.  The translation is the negative of the origin.

Parameters

dxX-coordinate of the translation.
dyY-coordinate of the translation.

viewStateChanged

mxGraphView.prototype.viewStateChanged = function()

Invoked after scale and/or translate has changed.

refresh

mxGraphView.prototype.refresh = function()

Clears the view if currentRoot is not null and revalidates.

revalidate

mxGraphView.prototype.revalidate = function()

Revalidates the complete view with all cell states.

clear

mxGraphView.prototype.clear = function(cell,
force,
recurse)

Removes the state of the given cell and all descendants if the given cell is not the current root.

Parameters

cellOptional mxCell for which the state should be removed.  Default is the root of the model.
forceBoolean indicating if the current root should be ignored for recursion.

invalidate

mxGraphView.prototype.invalidate = function(cell,
recurse,
includeEdges)

Invalidates the state of the given cell, all its descendants and connected edges.

Parameters

cellOptional mxCell to be invalidated.  Default is the root of the model.

validate

mxGraphView.prototype.validate = function(cell)

Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.  Finally the background is validated using validateBackground.

Parameters

cellOptional mxCell to be used as the root of the validation.  Default is currentRoot or the root of the model.

getEmptyBounds

mxGraphView.prototype.getEmptyBounds = function()

Returns the bounds for an empty graph.  This returns a rectangle at translate with the size of 0 x 0.

getBoundingBox

mxGraphView.prototype.getBoundingBox = function(state,
recurse)

Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.

Parameters

statemxCellState whose bounding box should be returned.
recurseOptional boolean indicating if the children should be included.  Default is true.

createBackgroundPageShape

mxGraphView.prototype.createBackgroundPageShape = function(bounds)

Creates and returns the shape used as the background page.

Parameters

boundsmxRectangle that represents the bounds of the shape.

validateBackground

mxGraphView.prototype.validateBackground = function()

Calls validateBackgroundImage and validateBackgroundPage.

validateBackgroundImage

mxGraphView.prototype.validateBackgroundImage = function()

Validates the background image.

validateBackgroundPage

mxGraphView.prototype.validateBackgroundPage = function()

Validates the background page.

getBackgroundPageBounds

mxGraphView.prototype.getBackgroundPageBounds = function()

Returns the bounds for the background page.

redrawBackgroundImage

mxGraphView.prototype.redrawBackgroundImage = function(backgroundImage,
bg)

Updates the bounds and redraws the background image.

Example

If the background image should not be scaled, this can be replaced with the following.

mxGraphView.prototype.redrawBackground = function(backgroundImage, bg)
{
  backgroundImage.bounds.x = this.translate.x;
  backgroundImage.bounds.y = this.translate.y;
  backgroundImage.bounds.width = bg.width;
  backgroundImage.bounds.height = bg.height;

  backgroundImage.redraw();
};

Parameters

backgroundImagemxImageShape that represents the background image.
bgmxImage that specifies the image and its dimensions.

validateCell

mxGraphView.prototype.validateCell = function(cell,
visible)

Recursively creates the cell state for the given cell if visible is true and the given cell is visible.  If the cell is not visible but the state exists then it is removed using removeState.

Parameters

cellmxCell whose mxCellState should be created.
visibleOptional boolean indicating if the cell should be visible.  Default is true.

validateCellState

mxGraphView.prototype.validateCellState = function(cell,
recurse)

Validates and repaints the mxCellState for the given mxCell.

Parameters

cellmxCell whose mxCellState should be validated.
recurseOptional boolean indicating if the children of the cell should be validated.  Default is true.

updateCellState

mxGraphView.prototype.updateCellState = function(state)

Updates the given mxCellState.

Parameters

statemxCellState to be updated.

isCellCollapsed

mxGraphView.prototype.isCellCollapsed = function(cell)

Returns true if the children of the given cell should not be visible in the view.  This implementation uses mxGraph.isCellVisible but it can be overidden to use a separate condition.

updateVertexState

mxGraphView.prototype.updateVertexState = function(state,
geo)

Validates the given cell state.

updateEdgeState

mxGraphView.prototype.updateEdgeState = function(state,
geo)

Validates the given cell state.

updateVertexLabelOffset

mxGraphView.prototype.updateVertexLabelOffset = function(state)

Updates the absoluteOffset of the given vertex cell state.  This takes into account the label position styles.

Parameters

statemxCellState whose absolute offset should be updated.

resetValidationState

mxGraphView.prototype.resetValidationState = function()

Resets the current validation state.

stateValidated

mxGraphView.prototype.stateValidated = function(state)

Invoked when a state has been processed in <validatePoints>.  This is used to update the order of the DOM nodes of the shape.

Parameters

statemxCellState that represents the cell state.

updateFixedTerminalPoints

mxGraphView.prototype.updateFixedTerminalPoints = function(edge,
source,
target)

Sets the initial absolute terminal points in the given state before the edge style is computed.

Parameters

edgemxCellState whose initial terminal points should be updated.
sourcemxCellState which represents the source terminal.
targetmxCellState which represents the target terminal.

updateFixedTerminalPoint

mxGraphView.prototype.updateFixedTerminalPoint = function(edge,
terminal,
source,
constraint)

Sets the fixed source or target terminal point on the given edge.

Parameters

edgemxCellState whose terminal point should be updated.
terminalmxCellState which represents the actual terminal.
sourceBoolean that specifies if the terminal is the source.
constraintmxConnectionConstraint that specifies the connection.

getFixedTerminalPoint

mxGraphView.prototype.getFixedTerminalPoint = function(edge,
terminal,
source,
constraint)

Returns the fixed source or target terminal point for the given edge.

Parameters

edgemxCellState whose terminal point should be returned.
terminalmxCellState which represents the actual terminal.
sourceBoolean that specifies if the terminal is the source.
constraintmxConnectionConstraint that specifies the connection.

updateBoundsFromStencil

mxGraphView.prototype.updateBoundsFromStencil = function(state)

Updates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.

Parameters

edgemxCellState whose bounds should be updated.

updatePoints

mxGraphView.prototype.updatePoints = function(edge,
points,
source,
target)

Updates the absolute points in the given state using the specified array of mxPoints as the relative points.

Parameters

edgemxCellState whose absolute points should be updated.
pointsArray of mxPoints that constitute the relative points.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.

transformControlPoint

mxGraphView.prototype.transformControlPoint = function(state,
pt)

Transforms the given control point to an absolute point.

isLoopStyleEnabled

mxGraphView.prototype.isLoopStyleEnabled = function(edge,
points,
source,
target)

Returns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.  This implementation returns true if the given edge is a loop and does not have connections constraints associated.

getEdgeStyle

mxGraphView.prototype.getEdgeStyle = function(edge,
points,
source,
target)

Returns the edge style function to be used to render the given edge state.

updateFloatingTerminalPoints

mxGraphView.prototype.updateFloatingTerminalPoints = function(state,
source,
target)

Updates the terminal points in the given state after the edge style was computed for the edge.

Parameters

statemxCellState whose terminal points should be updated.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.

updateFloatingTerminalPoint

mxGraphView.prototype.updateFloatingTerminalPoint = function(edge,
start,
end,
source)

Updates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.

Parameters

edgemxCellState whose terminal point should be updated.
startmxCellState for the terminal on “this” side of the edge.
endmxCellState for the terminal on the other side of the edge.
sourceBoolean indicating if start is the source terminal state.

getFloatingTerminalPoint

mxGraphView.prototype.getFloatingTerminalPoint = function(edge,
start,
end,
source)

Returns the floating terminal point for the given edge, start and end state, where start is the source if source is true.

Parameters

edgemxCellState whose terminal point should be returned.
startmxCellState for the terminal on “this” side of the edge.
endmxCellState for the terminal on the other side of the edge.
sourceBoolean indicating if start is the source terminal state.

getTerminalPort

mxGraphView.prototype.getTerminalPort = function(state,
terminal,
source)

Returns an mxCellState that represents the source or target terminal or port for the given edge.

Parameters

statemxCellState that represents the state of the edge.
terminalmxCellState that represents the terminal.
sourceBoolean indicating if the given terminal is the source terminal.

getPerimeterPoint

mxGraphView.prototype.getPerimeterPoint = function(terminal,
next,
orthogonal,
border)

Returns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.

Parameters

terminalmxCellState for the source or target terminal.
nextmxPoint that lies outside of the given terminal.
orthogonalBoolean that specifies if the orthogonal projection onto the perimeter should be returned.  If this is false then the intersection of the perimeter and the line between the next and the center point is returned.
borderOptional border between the perimeter and the shape.

getRoutingCenterX

mxGraphView.prototype.getRoutingCenterX = function (state)

Returns the x-coordinate of the center point for automatic routing.

getRoutingCenterY

mxGraphView.prototype.getRoutingCenterY = function (state)

Returns the y-coordinate of the center point for automatic routing.

getPerimeterBounds

mxGraphView.prototype.getPerimeterBounds = function(terminal,
border)

Returns the perimeter bounds for the given terminal, edge pair as an mxRectangle.

If you have a model where each terminal has a relative child that should act as the graphical endpoint for a connection from/to the terminal, then this method can be replaced as follows:

var oldGetPerimeterBounds = mxGraphView.prototype.getPerimeterBounds;
mxGraphView.prototype.getPerimeterBounds = function(terminal, edge, isSource)
{
  var model = this.graph.getModel();
  var childCount = model.getChildCount(terminal.cell);

  if (childCount > 0)
  {
    var child = model.getChildAt(terminal.cell, 0);
    var geo = model.getGeometry(child);

    if (geo != null &&
        geo.relative)
    {
      var state = this.getState(child);

      if (state != null)
      {
        terminal = state;
      }
    }
  }

  return oldGetPerimeterBounds.apply(this, arguments);
};

Parameters

terminalmxCellState that represents the terminal.
borderNumber that adds a border between the shape and the perimeter.

getPerimeterFunction

mxGraphView.prototype.getPerimeterFunction = function(state)

Returns the perimeter function for the given state.

getNextPoint

mxGraphView.prototype.getNextPoint = function(edge,
opposite,
source)

Returns the nearest point in the list of absolute points or the center of the opposite terminal.

Parameters

edgemxCellState that represents the edge.
oppositemxCellState that represents the opposite terminal.
sourceBoolean indicating if the next point for the source or target should be returned.

getVisibleTerminal

mxGraphView.prototype.getVisibleTerminal = function(edge,
source)

Returns the nearest ancestor terminal that is visible.  The edge appears to be connected to this terminal on the display.  The result of this method is cached in mxCellState.getVisibleTerminalState.

Parameters

edgemxCell whose visible terminal should be returned.
sourceBoolean that specifies if the source or target terminal should be returned.

updateEdgeBounds

mxGraphView.prototype.updateEdgeBounds = function(state)

Updates the given state using the bounding box of t he absolute points.  Also updates mxCellState.terminalDistance, mxCellState.length and mxCellState.segments.

Parameters

statemxCellState whose bounds should be updated.

getPoint

mxGraphView.prototype.getPoint = function(state,
geometry)

Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint.  The edge is represented by the given mxCellState.

Parameters

statemxCellState that represents the state of the parent edge.
geometrymxGeometry that represents the relative location.

getRelativePoint

mxGraphView.prototype.getRelativePoint = function(edgeState,
x,
y)

Gets the relative point that describes the given, absolute label position for the given edge state.

Parameters

statemxCellState that represents the state of the parent edge.
xSpecifies the x-coordinate of the absolute label location.
ySpecifies the y-coordinate of the absolute label location.

updateEdgeLabelOffset

mxGraphView.prototype.updateEdgeLabelOffset = function(state)

Updates mxCellState.absoluteOffset for the given state.  The absolute offset is normally used for the position of the edge label.  Is is calculated from the geometry as an absolute offset from the center between the two endpoints if the geometry is absolute, or as the relative distance between the center along the line and the absolute orthogonal distance if the geometry is relative.

Parameters

statemxCellState whose absolute offset should be updated.

getState

mxGraphView.prototype.getState = function(cell,
create)

Returns the mxCellState for the given cell.  If create is true, then the state is created if it does not yet exist.

Parameters

cellmxCell for which the mxCellState should be returned.
createOptional boolean indicating if a new state should be created if it does not yet exist.  Default is false.

isRendering

mxGraphView.prototype.isRendering = function()

Returns rendering.

setRendering

mxGraphView.prototype.setRendering = function(value)

Sets rendering.

isAllowEval

mxGraphView.prototype.isAllowEval = function()

Returns allowEval.

setAllowEval

mxGraphView.prototype.setAllowEval = function(value)

Sets allowEval.

getStates

mxGraphView.prototype.getStates = function()

Returns states.

setStates

mxGraphView.prototype.setStates = function(value)

Sets states.

getCellStates

mxGraphView.prototype.getCellStates = function(cells)

Returns the mxCellStates for the given array of mxCells.  The array contains all states that are not null, that is, the returned array may have less elements than the given array.  If no argument is given, then this returns states.

removeState

mxGraphView.prototype.removeState = function(cell)

Removes and returns the mxCellState for the given cell.

Parameters

cellmxCell for which the mxCellState should be removed.

createState

mxGraphView.prototype.createState = function(cell)

Creates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.

Parameters

cellmxCell for which a new mxCellState should be created.

getCanvas

mxGraphView.prototype.getCanvas = function()

Returns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.

getBackgroundPane

mxGraphView.prototype.getBackgroundPane = function()

Returns the DOM node that represents the background layer.

getDrawPane

mxGraphView.prototype.getDrawPane = function()

Returns the DOM node that represents the main drawing layer.

getOverlayPane

mxGraphView.prototype.getOverlayPane = function()

Returns the DOM node that represents the layer above the drawing layer.

getDecoratorPane

mxGraphView.prototype.getDecoratorPane = function()

Returns the DOM node that represents the topmost drawing layer.

isContainerEvent

mxGraphView.prototype.isContainerEvent = function(evt)

Returns true if the event origin is one of the drawing panes or containers of the view.

isScrollEvent

mxGraphView.prototype.isScrollEvent = function(evt)

Returns true if the event origin is one of the scrollbars of the container in IE.  Such events are ignored.

init

mxGraphView.prototype.init = function()

Initializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.

installListeners

mxGraphView.prototype.installListeners = function()

Installs the required listeners in the container.

create

mxGraphView.prototype.createHtml = function()

Creates the DOM nodes for the HTML display.

updateHtmlCanvasSize

mxGraphView.prototype.updateHtmlCanvasSize = function(width,
height)

Updates the size of the HTML canvas.

createHtmlPane

mxGraphView.prototype.createHtmlPane = function(width,
height)

Creates and returns a drawing pane in HTML (DIV).

create

mxGraphView.prototype.createVml = function()

Creates the DOM nodes for the VML display.

createVmlPane

mxGraphView.prototype.createVmlPane = function(width,
height)

Creates a drawing pane in VML (group).

create

mxGraphView.prototype.createSvg = function()

Creates and returns the DOM nodes for the SVG display.

updateContainerStyle

mxGraphView.prototype.updateContainerStyle = function(container)

Updates the style of the container after installing the SVG DOM elements.

destroy

mxGraphView.prototype.destroy = function()

Destroys the view and all its resources.

mxCurrentRootChange

Action to change the current root in a view.

Summary
Functions
mxCurrentRootChangeConstructs a change of the current root in the given view.
executeChanges the current root of the view.

Functions

mxCurrentRootChange

function mxCurrentRootChange(view,
root)

Constructs a change of the current root in the given view.

execute

mxCurrentRootChange.prototype.execute = function()

Changes the current root of the view.

mxGraph

Extends mxEventSource to implement a graph component for the browser.  This is the main class of the package.  To activate panning and connections use setPanning and setConnectable.  For rubberband selection you must create a new instance of mxRubberband.  The following listeners are added to mouseListeners by default:

These listeners will be called in the above order if they are enabled.

Background Images

To display a background image, set the image, image width and image height using setBackgroundImage.  If one of the above values has changed then the view’s mxGraphView.validate should be invoked.

Cell Images

To use images in cells, a shape must be specified in the default vertex style (or any named style).  Possible shapes are mxConstants.SHAPE_IMAGE and mxConstants.SHAPE_LABEL.  The code to change the shape used in the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;

For the default vertex style, the image to be displayed can be specified in a cell’s style using the mxConstants.STYLE_IMAGE key and the image URL as a value, for example:

image=http://www.example.com/image.gif

For a named style, the the stylename must be the first element of the cell style:

stylename;image=http://www.example.com/image.gif

A cell style can have any number of key=value pairs added, divided by a semicolon as follows:

[stylename;|key=value;]

Labels

The cell labels are defined by getLabel which uses convertValueToString if labelsVisible is true.  If a label must be rendered as HTML markup, then isHtmlLabel should return true for the respective cell.  If all labels contain HTML markup, htmlLabels can be set to true.  NOTE: Enabling HTML labels carries a possible security risk (see the section on security in the manual).

If wrapping is needed for a label, then isHtmlLabel and isWrapping must return true for the cell whose label should be wrapped.  See isWrapping for an example.

If clipping is needed to keep the rendering of a HTML label inside the bounds of its vertex, then <isClipping> should return true for the respective cell.

By default, edge labels are movable and vertex labels are fixed.  This can be changed by setting edgeLabelsMovable and vertexLabelsMovable, or by overriding isLabelMovable.

In-place Editing

In-place editing is started with a doubleclick or by typing F2.  Programmatically, <edit> is used to check if the cell is editable (isCellEditable) and call startEditingAtCell, which invokes mxCellEditor.startEditing.  The editor uses the value returned by getEditingValue as the editing value.

After in-place editing, labelChanged is called, which invokes mxGraphModel.setValue, which in turn calls mxGraphModel.valueForCellChanged via mxValueChange.

The event that triggers in-place editing is passed through to the cellEditor, which may take special actions depending on the type of the event or mouse location, and is also passed to getEditingValue.  The event is then passed back to the event processing functions which can perform specific actions based on the trigger event.

Tooltips

Tooltips are implemented by getTooltip, which calls getTooltipForCell if a cell is under the mousepointer.  The default implementation checks if the cell has a getTooltip function and calls it if it exists.  Hence, in order to provide custom tooltips, the cell must provide a getTooltip function, or one of the two above functions must be overridden.

Typically, for custom cell tooltips, the latter function is overridden as follows:

graph.getTooltipForCell = function(cell)
{
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

When using a config file, the function is overridden in the mxGraph section using the following entry:

<add as="getTooltipForCell"><![CDATA[
  function(cell)
  {
    var label = this.convertValueToString(cell);
    return 'Tooltip for '+label;
  }
]]></add>

”this” refers to the graph in the implementation, so for example to check if a cell is an edge, you use this.getModel().isEdge(cell)

For replacing the default implementation of getTooltipForCell (rather than replacing the function on a specific instance), the following code should be used after loading the JavaScript files, but before creating a new mxGraph instance using mxGraph:

mxGraph.prototype.getTooltipForCell = function(cell)
{
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

Shapes & Styles

The implementation of new shapes is demonstrated in the examples.  We’ll assume that we have implemented a custom shape with the name BoxShape which we want to use for drawing vertices.  To use this shape, it must first be registered in the cell renderer as follows:

mxCellRenderer.registerShape('box', BoxShape);

The code registers the BoxShape constructor under the name box in the cell renderer of the graph.  The shape can now be referenced using the shape-key in a style definition.  (The cell renderer contains a set of additional shapes, namely one for each constant with a SHAPE-prefix in mxConstants.)

Styles are a collection of key, value pairs and a stylesheet is a collection of named styles.  The names are referenced by the cellstyle, which is stored in mxCell.style with the following format: [stylename;|key=value;].  The string is resolved to a collection of key, value pairs, where the keys are overridden with the values in the string.

When introducing a new shape, the name under which the shape is registered must be used in the stylesheet.  There are three ways of doing this:

  • By changing the default style, so that all vertices will use the new shape
  • By defining a new style, so that only vertices with the respective cellstyle will use the new shape
  • By using shape=box in the cellstyle’s optional list of key, value pairs to be overridden

In the first case, the code to fetch and modify the default style for vertices is as follows:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';

The code takes the default vertex style, which is used for all vertices that do not have a specific cellstyle, and modifies the value for the shape-key in-place to use the new BoxShape for drawing vertices.  This is done by assigning the box value in the second line, which refers to the name of the BoxShape in the cell renderer.

In the second case, a collection of key, value pairs is created and then added to the stylesheet under a new name.  In order to distinguish the shapename and the stylename we’ll use boxstyle for the stylename:

var style = new Object();
style[mxConstants.STYLE_SHAPE] = 'box';
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
graph.getStylesheet().putCellStyle('boxstyle', style);

The code adds a new style with the name boxstyle to the stylesheet.  To use this style with a cell, it must be referenced from the cellstyle as follows:

var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 20,
             'boxstyle');

To summarize, each new shape must be registered in the mxCellRenderer with a unique name.  That name is then used as the value of the shape-key in a default or custom style.  If there are multiple custom shapes, then there should be a separate style for each shape.

Inheriting Styles

For fill-, stroke-, gradient- and indicatorColors special keywords can be used.  The inherit keyword for one of these colors will inherit the color for the same key from the parent cell.  The swimlane keyword does the same, but inherits from the nearest swimlane in the ancestor hierarchy.  Finally, the indicated keyword will use the color of the indicator as the color for the given key.

Scrollbars

The <containers> overflow CSS property defines if scrollbars are used to display the graph.  For values of ‘auto’ or ‘scroll’, the scrollbars will be shown.  Note that the resizeContainer flag is normally not used together with scrollbars, as it will resize the container to match the size of the graph after each change.

Multiplicities and Validation

To control the possible connections in mxGraph, getEdgeValidationError is used.  The default implementation of the function uses multiplicities, which is an array of mxMultiplicity.  Using this class allows to establish simple multiplicities, which are enforced by the graph.

The mxMultiplicity uses <mxCell.is> to determine for which terminals it applies.  The default implementation of <mxCell.is> works with DOM nodes (XML nodes) and checks if the given type parameter matches the nodeName of the node (case insensitive).  Optionally, an attributename and value can be specified which are also checked.

getEdgeValidationError is called whenever the connectivity of an edge changes.  It returns an empty string or an error message if the edge is invalid or null if the edge is valid.  If the returned string is not empty then it is displayed as an error message.

mxMultiplicity allows to specify the multiplicity between a terminal and its possible neighbors.  For example, if any rectangle may only be connected to, say, a maximum of two circles you can add the following rule to multiplicities:

graph.multiplicities.push(new mxMultiplicity(
  true, 'rectangle', null, null, 0, 2, ['circle'],
  'Only 2 targets allowed',
  'Only shape targets allowed'));

This will display the first error message whenever a rectangle is connected to more than two circles and the second error message if a rectangle is connected to anything but a circle.

For certain multiplicities, such as a minimum of 1 connection, which cannot be enforced at cell creation time (unless the cell is created together with the connection), mxGraph offers validate which checks all multiplicities for all cells and displays the respective error messages in an overlay icon on the cells.

If a cell is collapsed and contains validation errors, a respective warning icon is attached to the collapsed cell.

Auto-Layout

For automatic layout, the <getLayout> hook is provided in mxLayoutManager.  It can be overridden to return a layout algorithm for the children of a given cell.

Unconnected edges

The default values for all switches are designed to meet the requirements of general diagram drawing applications.  A very typical set of settings to avoid edges that are not connected is the following:

graph.setAllowDanglingEdges(false);
graph.setDisconnectOnMove(false);

Setting the cloneInvalidEdges switch to true is optional.  This switch controls if edges are inserted after a copy, paste or clone-drag if they are invalid.  For example, edges are invalid if copied or control-dragged without having selected the corresponding terminals and allowDanglingEdges is false, in which case the edges will not be cloned if the switch is false.

Output

To produce an XML representation for a diagram, the following code can be used.

var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(graph.getModel());

This will produce an XML node than can be handled using the DOM API or turned into a string representation using the following code:

var xml = mxUtils.getXml(node);

To obtain a formatted string, mxUtils.getPrettyXml can be used instead.

This string can now be stored in a local persistent storage (for example using Google Gears) or it can be passed to a backend using mxUtils.post as follows.  The url variable is the URL of the Java servlet, PHP page or HTTP handler, depending on the server.

var xmlString = encodeURIComponent(mxUtils.getXml(node));
mxUtils.post(url, 'xml='+xmlString, function(req)
{
  // Process server response using req of type mxXmlRequest
});

Input

To load an XML representation of a diagram into an existing graph object mxUtils.load can be used as follows.  The url variable is the URL of the Java servlet, PHP page or HTTP handler that produces the XML string.

var xmlDoc = mxUtils.load(url).getXml();
var node = xmlDoc.documentElement;
var dec = new mxCodec(node.ownerDocument);
dec.decode(node, graph.getModel());

For creating a page that loads the client and a diagram using a single request please refer to the deployment examples in the backends.

Functional dependencies

(see images/callgraph.png)

Resources

resources/graphLanguage resources for mxGraph
Summary
Events
mxEvent.ROOTFires if the root in the model has changed.
mxEvent.ALIGN_CELLSFires between begin- and endUpdate in alignCells.
mxEvent.FLIP_EDGEFires between begin- and endUpdate in flipEdge.
mxEvent.ORDER_CELLSFires between begin- and endUpdate in orderCells.
mxEvent.CELLS_ORDEREDFires between begin- and endUpdate in cellsOrdered.
mxEvent.GROUP_CELLSFires between begin- and endUpdate in groupCells.
mxEvent.UNGROUP_CELLSFires between begin- and endUpdate in ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENTFires between begin- and endUpdate in removeCellsFromParent.
mxEvent.ADD_CELLSFires between begin- and endUpdate in addCells.
mxEvent.CELLS_ADDEDFires between begin- and endUpdate in cellsAdded.
mxEvent.REMOVE_CELLSFires between begin- and endUpdate in removeCells.
mxEvent.CELLS_REMOVEDFires between begin- and endUpdate in cellsRemoved.
mxEvent.SPLIT_EDGEFires between begin- and endUpdate in splitEdge.
mxEvent.TOGGLE_CELLSFires between begin- and endUpdate in toggleCells.
mxEvent.FOLD_CELLSFires between begin- and endUpdate in foldCells.
mxEvent.CELLS_FOLDEDFires between begin- and endUpdate in cellsFolded.
mxEvent.UPDATE_CELL_SIZEFires between begin- and endUpdate in updateCellSize.
mxEvent.RESIZE_CELLSFires between begin- and endUpdate in resizeCells.
mxEvent.CELLS_RESIZEDFires between begin- and endUpdate in cellsResized.
mxEvent.MOVE_CELLSFires between begin- and endUpdate in moveCells.
mxEvent.CELLS_MOVEDFires between begin- and endUpdate in cellsMoved.
mxEvent.CONNECT_CELLFires between begin- and endUpdate in connectCell.
mxEvent.CELL_CONNECTEDFires between begin- and endUpdate in cellConnected.
mxEvent.REFRESHFires after refresh was executed.
mxEvent.CLICKFires in click after a click event.
mxEvent.DOUBLE_CLICKFires in dblClick after a double click.
mxEvent.GESTUREFires in fireGestureEvent after a touch gesture.
mxEvent.TAP_AND_HOLDFires in tapAndHold if a tap and hold event was detected.
mxEvent.FIRE_MOUSE_EVENTFires in fireMouseEvent before the mouse listeners are invoked.
mxEvent.SIZEFires after sizeDidChange was executed.
mxEvent.START_EDITINGFires before the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STARTEDFires after the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STOPPEDFires after the in-place editor stops in stopEditing.
mxEvent.LABEL_CHANGEDFires between begin- and endUpdate in cellLabelChanged.
mxEvent.ADD_OVERLAYFires after an overlay is added in addCellOverlay.
mxEvent.REMOVE_OVERLAYFires after an overlay is removed in removeCellOverlay and removeCellOverlays.
mxGraphConstructs a new mxGraph in the specified container.
Variables
mouseListenersHolds the mouse event listeners.
isMouseDownHolds the state of the mouse button.
modelHolds the mxGraphModel that contains the cells to be displayed.
viewHolds the mxGraphView that caches the mxCellStates for the cells.
stylesheetHolds the mxStylesheet that defines the appearance of the cells.
selectionModelHolds the mxGraphSelectionModel that models the current selection.
cellEditorHolds the mxCellEditor that is used as the in-place editing.
cellRendererHolds the mxCellRenderer for rendering the cells in the graph.
multiplicitiesAn array of mxMultiplicities describing the allowed connections in a graph.
renderHintRenderHint as it was passed to the constructor.
dialectDialect to be used for drawing the graph.
gridSizeSpecifies the grid size.
gridEnabledSpecifies if the grid is enabled.
portsEnabledSpecifies if ports are enabled.
nativeDoubleClickEnabledSpecifies if native double click events should be detected.
doubleTapEnabledSpecifies if double taps on touch-based devices should be handled as a double click.
doubleTapTimeoutSpecifies the timeout for double taps and non-native double clicks.
doubleTapToleranceSpecifies the tolerance for double taps and double clicks in quirks mode.
lastTouchXHolds the x-coordinate of the last touch event for double tap detection.
lastTouchXHolds the y-coordinate of the last touch event for double tap detection.
lastTouchTimeHolds the time of the last touch event for double click detection.
tapAndHoldEnabledSpecifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelaySpecifies the time for a tap and hold.
tapAndHoldInProgressTrue if the timer for tap and hold events is running.
tapAndHoldValidTrue as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.
initialTouchXHolds the x-coordinate of the intial touch event for tap and hold.
initialTouchYHolds the y-coordinate of the intial touch event for tap and hold.
toleranceTolerance for a move to be handled as a single click.
defaultOverlapValue returned by getOverlap if isAllowOverlapParent returns true for the given cell.
defaultParentSpecifies the default parent to be used to insert new cells.
alternateEdgeStyleSpecifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
backgroundImageSpecifies the mxImage to be returned by getBackgroundImage.
pageVisibleSpecifies if the background page should be visible.
pageBreaksVisibleSpecifies if a dashed line should be drawn between multiple pages.
pageBreakColorSpecifies the color for page breaks.
pageBreakDashedSpecifies the page breaks should be dashed.
minPageBreakDistSpecifies the minimum distance for page breaks to be visible.
preferPageSizeSpecifies if the graph size should be rounded to the next page number in sizeDidChange.
pageFormatSpecifies the page format for the background page.
pageScaleSpecifies the scale of the background page.
enabledSpecifies the return value for isEnabled.
escapeEnabledSpecifies if mxKeyHandler should invoke escape when the escape key is pressed.
invokesStopCellEditingIf true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
enterStopsCellEditingIf true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
useScrollbarsForPanningSpecifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
exportEnabledSpecifies the return value for canExportCell.
importEnabledSpecifies the return value for canImportCell.
cellsLockedSpecifies the return value for isCellLocked.
cellsCloneableSpecifies the return value for isCellCloneable.
foldingEnabledSpecifies if folding (collapse and expand via an image icon in the graph should be enabled).
cellsEditableSpecifies the return value for isCellEditable.
cellsDeletableSpecifies the return value for isCellDeletable.
cellsMovableSpecifies the return value for isCellMovable.
edgeLabelsMovableSpecifies the return value for edges in isLabelMovable.
vertexLabelsMovableSpecifies the return value for vertices in isLabelMovable.
dropEnabledSpecifies the return value for isDropEnabled.
splitEnabledSpecifies if dropping onto edges should be enabled.
cellsResizableSpecifies the return value for isCellResizable.
cellsBendableSpecifies the return value for isCellsBendable.
cellsSelectableSpecifies the return value for isCellSelectable.
cellsDisconnectableSpecifies the return value for <isCellDisconntable>.
autoSizeCellsSpecifies if the graph should automatically update the cell size after an edit.
autoSizeCellsOnAddSpecifies if autoSize style should be applied when cells are added.
autoScrollSpecifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
ignoreScrollbarsSpecifies if the graph should automatically scroll regardless of the scrollbars.
translateToScrollPositionSpecifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
timerAutoScrollSpecifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
allowAutoPanningSpecifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
autoExtendSpecifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
maximumGraphBoundsmxRectangle that specifies the area in which all cells in the diagram should be placed.
minimumGraphSizemxRectangle that specifies the minimum size of the graph.
minimumContainerSizemxRectangle that specifies the minimum size of the <container> if resizeContainer is true.
maximumContainerSizemxRectangle that specifies the maximum size of the container if resizeContainer is true.
resizeContainerSpecifies if the container should be resized to the graph size when the graph size has changed.
borderBorder to be added to the bottom and right side when the container is being resized after the graph has been changed.
keepEdgesInForegroundSpecifies if edges should appear in the foreground regardless of their order in the model.
keepEdgesInBackgroundSpecifies if edges should appear in the background regardless of their order in the model.
allowNegativeCoordinatesSpecifies if negative coordinates for vertices are allowed.
constrainChildrenSpecifies if a child should be constrained inside the parent bounds after a move or resize of the child.
constrainRelativeChildrenSpecifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
extendParentsSpecifies if a parent should contain the child bounds after a resize of the child.
extendParentsOnAddSpecifies if parents should be extended according to the extendParents switch if cells are added.
extendParentsOnAddSpecifies if parents should be extended according to the extendParents switch if cells are added.
recursiveResizeSpecifies the return value for isRecursiveResize.
collapseToPreferredSizeSpecifies if the cell size should be changed to the preferred size when a cell is first collapsed.
zoomFactorSpecifies the factor used for zoomIn and zoomOut.
keepSelectionVisibleOnZoomSpecifies if the viewport should automatically contain the selection cells after a zoom operation.
centerZoomSpecifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
resetViewOnRootChangeSpecifies if the scale and translate should be reset if the root changes in the model.
resetEdgesOnResizeSpecifies if edge control points should be reset after the resize of a connected cell.
resetEdgesOnMoveSpecifies if edge control points should be reset after the move of a connected cell.
resetEdgesOnConnectSpecifies if edge control points should be reset after the the edge has been reconnected.
allowLoopsSpecifies if loops (aka self-references) are allowed.
defaultLoopStylemxEdgeStyle to be used for loops.
multigraphSpecifies if multiple edges in the same direction between the same pair of vertices are allowed.
connectableEdgesSpecifies if edges are connectable.
allowDanglingEdgesSpecifies if edges with disconnected terminals are allowed in the graph.
cloneInvalidEdgesSpecifies if edges that are cloned should be validated and only inserted if they are valid.
disconnectOnMoveSpecifies if edges should be disconnected from their terminals when they are moved.
labelsVisibleSpecifies if labels should be visible.
htmlLabelsSpecifies the return value for isHtmlLabel.
swimlaneSelectionEnabledSpecifies if swimlanes should be selectable via the content if the mouse is released.
swimlaneNestingSpecifies if nesting of swimlanes is allowed.
swimlaneIndicatorColorAttributeThe attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
imageBundlesHolds the list of image bundles.
minFitScaleSpecifies the minimum scale to be applied in fit.
maxFitScaleSpecifies the maximum scale to be applied in fit.
panDxCurrent horizontal panning value.
panDyCurrent vertical panning value.
collapsedImageSpecifies the mxImage to indicate a collapsed state.
expandedImageSpecifies the mxImage to indicate a expanded state.
warningImageSpecifies the mxImage for the image to be used to display a warning overlay.
alreadyConnectedResourceSpecifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
containsValidationErrorsResourceSpecifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
collapseExpandResourceSpecifies the resource key for the tooltip on the collapse/expand icon.
initInitializes the <container> and creates the respective datastructures.
createHandlersCreates the tooltip-, panning-, connection- and graph-handler (in this order).
createTooltipHandlerCreates and returns a new mxTooltipHandler to be used in this graph.
createSelectionCellsHandlerCreates and returns a new mxTooltipHandler to be used in this graph.
createConnectionHandlerCreates and returns a new mxConnectionHandler to be used in this graph.
createGraphHandlerCreates and returns a new mxGraphHandler to be used in this graph.
createPanningHandlerCreates and returns a new mxPanningHandler to be used in this graph.
createPopupMenuHandlerCreates and returns a new mxPopupMenuHandler to be used in this graph.
createSelectionModelCreates a new mxGraphSelectionModel to be used in this graph.
createStylesheetCreates a new mxGraphSelectionModel to be used in this graph.
createGraphViewCreates a new mxGraphView to be used in this graph.
createCellRendererCreates a new mxCellRenderer to be used in this graph.
createCellEditorCreates a new mxCellEditor to be used in this graph.
getModelReturns the mxGraphModel that contains the cells.
getViewReturns the mxGraphView that contains the mxCellStates.
getStylesheetReturns the mxStylesheet that defines the style.
setStylesheetSets the mxStylesheet that defines the style.
getSelectionModelReturns the mxGraphSelectionModel that contains the selection.
setSelectionModelSets the <mxSelectionModel> that contains the selection.
getSelectionCellsForChangesReturns the cells to be selected for the given array of changes.
graphModelChangedCalled when the graph model changes.
updateSelectionRemoves selection cells that are not in the model from the selection.
processChangeProcesses the given change and invalidates the respective cached data in view.
removeStateForCellRemoves all cached information for the given cell and its descendants.
Overlays
addCellOverlayAdds an mxCellOverlay for the specified cell.
getCellOverlaysReturns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
removeCellOverlayRemoves and returns the given mxCellOverlay from the given cell.
removeCellOverlaysRemoves all mxCellOverlays from the given cell.
clearCellOverlaysRemoves all mxCellOverlays in the graph for the given cell and all its descendants.
setCellWarningCreates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
In-place editing
startEditingCalls startEditingAtCell using the given cell or the first selection cell.
startEditingAtCellFires a startEditing event and invokes mxCellEditor.startEditing on <editor>.
getEditingValueReturns the initial value for in-place editing.
stopEditingStops the current editing and fires a <editingStopped> event.
labelChangedSets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
cellLabelChangedSets the new label for a cell.
Event processing
escapeProcesses an escape keystroke.
clickProcesses a singleclick on an optional cell and fires a click event.
dblClickProcesses a doubleclick on an optional cell and fires a <dblclick> event.
tapAndHoldHandles the mxMouseEvent by highlighting the mxCellState.
scrollPointToVisibleScrolls the graph to the given point, extending the graph container if specified.
createPanningManagerCreates and returns an mxPanningManager.
getBorderSizesReturns the size of the border and padding on all four sides of the container.
getPreferredPageSizeReturns the preferred size of the background page if preferPageSize is true.
fitScales the graph such that the complete diagram fits into <container> and returns the current scale in the view.
sizeDidChangeCalled when the size of the graph has changed.
doResizeContainerResizes the container for the given graph width and height.
updatePageBreaksInvokes from sizeDidChange to redraw the page breaks.
Cell styles
getCellStyleReturns an array of key, value pairs representing the cell style for the given cell.
postProcessCellStyleTries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
setCellStyleSets the style of the specified cells.
toggleCellStyleToggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
toggleCellStylesToggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
setCellStylesSets the key to value in the styles of the given cells.
toggleCellStyleFlagsToggles the given bit for the given key in the styles of the specified cells.
setCellStyleFlagsSets or toggles the given bit for the given key in the styles of the specified cells.
Cell alignment and orientation
alignCellsAligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
flipEdgeToggles the style of the given edge between null (or empty) and alternateEdgeStyle.
addImageBundleAdds the specified mxImageBundle.
removeImageBundleRemoves the specified mxImageBundle.
getImageFromBundlesSearches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
Order
orderCellsMoves the given cells to the front or back.
cellsOrderedMoves the given cells to the front or back.
Grouping
groupCellsAdds the cells into the given group.
getCellsForGroupReturns the cells with the same parent as the first cell in the given array.
getBoundsForGroupReturns the bounds to be used for the given group and children.
createGroupCellHook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.
ungroupCellsUngroups the given cells by moving the children the children to their parents parent and removing the empty groups.
removeCellsAfterUngroupHook to remove the groups after ungroupCells.
removeCellsFromParentRemoves the specified cells from their parents and adds them to the default parent.
updateGroupBoundsUpdates the bounds of the given groups to include all children and returns the passed-in cells.
getBoundingBoxReturns the bounding box for the given array of mxCells.
Cell cloning, insertion and removal
cloneCellReturns the clone for the given cell.
cloneCellsReturns the clones for the given cells.
insertVertexAdds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
createVertexHook method that creates the new vertex for insertVertex.
insertEdgeAdds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
createEdgeHook method that creates the new edge for insertEdge.
addEdgeAdds the edge to the parent and connects it to the given source and target terminals.
addCellAdds the cell to the parent and connects it to the given source and target terminals.
addCellsAdds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
cellsAddedAdds the specified cells to the given parent.
autoSizeCellResizes the specified cell to just fit around the its label and/or children
removeCellsRemoves the given cells from the graph including all connected edges if includeEdges is true.
cellsRemovedRemoves the given cells from the model.
splitEdgeSplits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
Cell visibility
toggleCellsSets the visible state of the specified cells and all connected edges if includeEdges is true.
cellsToggledSets the visible state of the specified cells.
Folding
foldCellsSets the collapsed state of the specified cells and all descendants if recurse is true.
cellsFoldedSets the collapsed state of the specified cells.
swapBoundsSwaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
updateAlternateBoundsUpdates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
addAllEdgesReturns an array with the given cells and all edges that are connected to a cell or one of its descendants.
getAllEdgesReturns all edges connected to the given cells or its descendants.
Cell sizing
updateCellSizeUpdates the size of the given cell in the model using cellSizeUpdated.
cellSizeUpdatedUpdates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
getPreferredSizeForCellReturns the preferred width and height of the given mxCell as an mxRectangle.
resizeCellSets the bounds of the given cell using resizeCells.
resizeCellsSets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
cellsResizedSets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
cellResizedResizes the parents recursively so that they contain the complete area of the resized child cell.
resizeChildCellsResizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
constrainChildCellsConstrains the children of the given cell using constrainChild.
scaleCellScales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
extendParentResizes the parents recursively so that they contain the complete area of the resized child cell.
Cell moving
importCellsClones and inserts the given cells into the graph using the move method and returns the inserted cells.
moveCellsMoves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
cellsMovedMoves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
translateCellTranslates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
getCellContainmentAreaReturns the mxRectangle inside which a cell is to be kept.
getMaximumGraphBoundsReturns the bounds inside which the diagram should be kept as an mxRectangle.
constrainChildKeeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
resetEdgesResets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
resetEdgeResets the control points of the given edge.
Cell connecting and connection constraints
getOutlineConstraintReturns the constraint used to connect to the outline of the given state.
getAllConnectionConstraintsReturns an array of all mxConnectionConstraints for the given terminal.
getConnectionConstraintReturns an mxConnectionConstraint that describes the given connection point.
setConnectionConstraintSets the mxConnectionConstraint that describes the given connection point.
getConnectionPointReturns the nearest point in the list of absolute points or the center of the opposite terminal.
connectCellConnects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
cellConnectedSets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
disconnectGraphDisconnects the given edges from the terminals which are not in the given array.
Drilldown
getCurrentRootReturns the current root of the displayed cell hierarchy.
getTranslateForRootReturns the translation to be used if the given cell is the root cell as an mxPoint.
isPortReturns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
getTerminalForPortReturns the terminal to be used for a given port.
getChildOffsetForCellReturns the offset to be used for the cells inside the given cell.
enterGroupUses the given cell as the root of the displayed cell hierarchy.
exitGroupChanges the current root to the next valid root in the displayed cell hierarchy.
homeUses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
isValidRootReturns true if the given cell is a valid root for the cell display hierarchy.
Graph display
getGraphBoundsReturns the bounds of the visible graph.
getCellBoundsReturns the scaled, translated bounds for the given cell.
getBoundingBoxFromGeometryReturns the bounding box for the geometries of the vertices in the given array of cells.
refreshClears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
snapSnaps the given numeric value to the grid if gridEnabled is true.
panGraphShifts the graph display by the given amount.
zoomInZooms into the graph by zoomFactor.
zoomOutZooms out of the graph by zoomFactor.
zoomActualResets the zoom and panning in the view.
zoomToZooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
centerCenters the graph in the container.
zoomZooms the graph using the given factor.
zoomToRectZooms the graph to the specified rectangle.
scrollCellToVisiblePans the graph so that it shows the given cell.
scrollRectToVisiblePans the graph so that it shows the given rectangle.
getCellGeometryReturns the mxGeometry for the given cell.
isCellVisibleReturns true if the given cell is visible in this graph.
isCellCollapsedReturns true if the given cell is collapsed in this graph.
isCellConnectableReturns true if the given cell is connectable in this graph.
isOrthogonalReturns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
isLoopReturns true if the given cell state is a loop.
isCloneEventReturns true if the given event is a clone event.
isTransparentClickEventHook for implementing click-through behaviour on selected cells.
isToggleEventReturns true if the given event is a toggle event.
isGridEnabledEventReturns true if the given mouse event should be aligned to the grid.
isConstrainedEventReturns true if the given mouse event should be aligned to the grid.
isIgnoreTerminalEventReturns true if the given mouse event should not allow any connections to be made.
Validation
validationAlertDisplays the given validation error in a dialog.
isEdgeValidChecks if the return value of getEdgeValidationError for the given arguments is null.
getEdgeValidationErrorReturns the validation error message to be displayed when inserting or changing an edges’ connectivity.
validateEdgeHook method for subclassers to return an error message for the given edge and terminals.
validateGraphValidates the graph by validating each descendant of the given cell or the root of the model.
getCellValidationErrorChecks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
validateCellHook method for subclassers to return an error message for the given cell and validation context.
Graph appearance
getBackgroundImageReturns the backgroundImage as an mxImage.
setBackgroundImageSets the new backgroundImage.
getFoldingImageReturns the mxImage used to display the collapsed state of the specified cell state.
convertValueToStringReturns the textual representation for the given cell.
getLabelReturns a string or DOM node that represents the label for the given cell.
isHtmlLabelReturns true if the label must be rendered as HTML markup.
isHtmlLabelsReturns htmlLabels.
setHtmlLabelsSets htmlLabels.
isWrappingThis enables wrapping for HTML labels.
isLabelClippedReturns true if the overflow portion of labels should be hidden.
getTooltipReturns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
getTooltipForCellReturns the string or DOM node to be used as the tooltip for the given cell.
getLinkForCellReturns the string to be used as the link for the given cell.
getCursorForMouseEventReturns the cursor value to be used for the CSS of the shape for the given event.
getCursorForCellReturns the cursor value to be used for the CSS of the shape for the given cell.
getStartSizeReturns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
getImageReturns the image URL for the given cell state.
getVerticalAlignReturns the vertical alignment for the given cell state.
getIndicatorColorReturns the indicator color for the given cell state.
getIndicatorGradientColorReturns the indicator gradient color for the given cell state.
getIndicatorShapeReturns the indicator shape for the given cell state.
getIndicatorImageReturns the indicator image for the given cell state.
getBorderReturns the value of border.
setBorderSets the value of border.
isSwimlaneReturns true if the given cell is a swimlane in the graph.
Graph behaviour
isResizeContainerReturns resizeContainer.
setResizeContainerSets resizeContainer.
isEnabledReturns true if the graph is enabled.
setEnabledSpecifies if the graph should allow any interactions.
isEscapeEnabledReturns escapeEnabled.
setEscapeEnabledSets escapeEnabled.
isInvokesStopCellEditingReturns invokesStopCellEditing.
setInvokesStopCellEditingSets invokesStopCellEditing.
isEnterStopsCellEditingReturns enterStopsCellEditing.
setEnterStopsCellEditingSets enterStopsCellEditing.
isCellLockedReturns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
isCellsLockedReturns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
setCellsLockedSets if any cell may be moved, sized, bended, disconnected, edited or selected.
getCloneableCellsReturns the cells which may be exported in the given array of cells.
isCellCloneableReturns true if the given cell is cloneable.
isCellsCloneableReturns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
setCellsCloneableSpecifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
getExportableCellsReturns the cells which may be exported in the given array of cells.
canExportCellReturns true if the given cell may be exported to the clipboard.
getImportableCellsReturns the cells which may be imported in the given array of cells.
canImportCellReturns true if the given cell may be imported from the clipboard.
isCellSelectableReturns true if the given cell is selectable.
isCellsSelectableReturns cellsSelectable.
setCellsSelectableSets cellsSelectable.
getDeletableCellsReturns the cells which may be exported in the given array of cells.
isCellDeletableReturns true if the given cell is moveable.
isCellsDeletableReturns cellsDeletable.
setCellsDeletableSets cellsDeletable.
isLabelMovableReturns true if the given edges’s label is moveable.
isCellRotatableReturns true if the given cell is rotatable.
getMovableCellsReturns the cells which are movable in the given array of cells.
isCellMovableReturns true if the given cell is moveable.
isCellsMovableReturns cellsMovable.
setCellsMovableSpecifies if the graph should allow moving of cells.
isGridEnabledReturns gridEnabled as a boolean.
setGridEnabledSpecifies if the grid should be enabled.
isPortsEnabledReturns portsEnabled as a boolean.
setPortsEnabledSpecifies if the ports should be enabled.
getGridSizeReturns gridSize.
setGridSizeSets gridSize.
getToleranceReturns tolerance.
setToleranceSets tolerance.
isVertexLabelsMovableReturns vertexLabelsMovable.
setVertexLabelsMovableSets vertexLabelsMovable.
isEdgeLabelsMovableReturns edgeLabelsMovable.
isEdgeLabelsMovableSets edgeLabelsMovable.
isSwimlaneNestingReturns swimlaneNesting as a boolean.
setSwimlaneNestingSpecifies if swimlanes can be nested by drag and drop.
isSwimlaneSelectionEnabledReturns swimlaneSelectionEnabled as a boolean.
setSwimlaneSelectionEnabledSpecifies if swimlanes should be selected if the mouse is released over their content area.
isMultigraphReturns multigraph as a boolean.
setMultigraphSpecifies if the graph should allow multiple connections between the same pair of vertices.
isAllowLoopsReturns allowLoops as a boolean.
setAllowDanglingEdgesSpecifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
isAllowDanglingEdgesReturns allowDanglingEdges as a boolean.
setConnectableEdgesSpecifies if edges should be connectable.
isConnectableEdgesReturns connectableEdges as a boolean.
setCloneInvalidEdgesSpecifies if edges should be inserted when cloned but not valid wrt.
isCloneInvalidEdgesReturns cloneInvalidEdges as a boolean.
setAllowLoopsSpecifies if loops are allowed.
isDisconnectOnMoveReturns disconnectOnMove as a boolean.
setDisconnectOnMoveSpecifies if edges should be disconnected when moved.
isDropEnabledReturns dropEnabled as a boolean.
setDropEnabledSpecifies if the graph should allow dropping of cells onto or into other cells.
isSplitEnabledReturns splitEnabled as a boolean.
setSplitEnabledSpecifies if the graph should allow dropping of cells onto or into other cells.
isCellResizableReturns true if the given cell is resizable.
isCellsResizableReturns cellsResizable.
setCellsResizableSpecifies if the graph should allow resizing of cells.
isTerminalPointMovableReturns true if the given terminal point is movable.
isCellBendableReturns true if the given cell is bendable.
isCellsBendableReturns <cellsBenadable>.
setCellsBendableSpecifies if the graph should allow bending of edges.
isCellEditableReturns true if the given cell is editable.
isCellsEditableReturns cellsEditable.
setCellsEditableSpecifies if the graph should allow in-place editing for cell labels.
isCellDisconnectableReturns true if the given cell is disconnectable from the source or target terminal.
isCellsDisconnectableReturns cellsDisconnectable.
setCellsDisconnectableSets cellsDisconnectable.
isValidSourceReturns true if the given cell is a valid source for new connections.
isValidTargetReturns isValidSource for the given cell.
isValidConnectionReturns true if the given target cell is a valid target for source.
setConnectableSpecifies if the graph should allow new connections.
isConnectableReturns true if the <connectionHandler> is enabled.
setTooltipsSpecifies if tooltips should be enabled.
setPanningSpecifies if panning should be enabled.
isEditingReturns true if the given cell is currently being edited.
isAutoSizeCellReturns true if the size of the given cell should automatically be updated after a change of the label.
isAutoSizeCellsReturns autoSizeCells.
setAutoSizeCellsSpecifies if cell sizes should be automatically updated after a label change.
isExtendParentReturns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
isExtendParentsReturns extendParents.
setExtendParentsSets extendParents.
isExtendParentsOnAddReturns extendParentsOnAdd.
setExtendParentsOnAddSets extendParentsOnAdd.
isExtendParentsOnMoveReturns <extendParentsOnMove>.
setExtendParentsOnMoveSets <extendParentsOnMove>.
isRecursiveResizeReturns recursiveResize.
setRecursiveResizeSets recursiveResize.
isConstrainChildReturns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
isConstrainChildrenReturns constrainChildren.
setConstrainChildrenSets constrainChildren.
isConstrainRelativeChildrenReturns constrainRelativeChildren.
setConstrainRelativeChildrenSets constrainRelativeChildren.
isConstrainChildrenReturns allowNegativeCoordinates.
setConstrainChildrenSets allowNegativeCoordinates.
getOverlapReturns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
isAllowOverlapParentReturns true if the given cell is allowed to be placed outside of the parents area.
getFoldableCellsReturns the cells which are movable in the given array of cells.
isCellFoldableReturns true if the given cell is foldable.
isValidDropTargetReturns true if the given cell is a valid drop target for the specified cells.
isSplitTargetReturns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
getDropTargetReturns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
Cell retrieval
getDefaultParentReturns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
setDefaultParentSets the defaultParent to the given cell.
getSwimlaneReturns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
getSwimlaneAtReturns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
getCellAtReturns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
intersectsReturns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
hitsSwimlaneContentReturns true if the given coordinate pair is inside the content are of the given swimlane.
getChildVerticesReturns the visible child vertices of the given parent.
getChildEdgesReturns the visible child edges of the given parent.
getChildCellsReturns the visible child vertices or edges in the given parent.
getConnectionsReturns all visible edges connected to the given cell without loops.
getIncomingEdgesReturns the visible incoming edges for the given cell.
getOutgoingEdgesReturns the visible outgoing edges for the given cell.
getEdgesReturns the incoming and/or outgoing edges for the given cell.
isValidAncestorReturns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
getOppositesReturns all distinct visible opposite cells for the specified terminal on the given edges.
getEdgesBetweenReturns the edges between the given source and target.
getPointForEventReturns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.
getCellsReturns the child vertices and edges of the given parent that are contained in the given rectangle.
getCellsBeyondReturns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
findTreeRootsReturns all children in the given parent which do not have incoming edges.
traverseTraverses the (directed) graph invoking the given function for each visited vertex and edge.
Selection
isCellSelectedReturns true if the given cell is selected.
isSelectionEmptyReturns true if the selection is empty.
clearSelectionClears the selection using mxGraphSelectionModel.clear.
getSelectionCountReturns the number of selected cells.
getSelectionCellReturns the first cell from the array of selected mxCells.
getSelectionCellsReturns the array of selected mxCells.
setSelectionCellSets the selection cell.
setSelectionCellsSets the selection cell.
addSelectionCellAdds the given cell to the selection.
addSelectionCellsAdds the given cells to the selection.
removeSelectionCellRemoves the given cell from the selection.
removeSelectionCellsRemoves the given cells from the selection.
selectRegionSelects and returns the cells inside the given rectangle for the specified event.
selectNextCellSelects the next cell.
selectPreviousCellSelects the previous cell.
selectParentCellSelects the parent cell.
selectChildCellSelects the first child cell.
selectCellSelects the next, parent, first child or previous cell, if all arguments are false.
selectAllSelects all children of the given parent cell or the children of the default parent if no parent is specified.
selectVerticesSelect all vertices inside the given parent or the default parent.
selectVerticesSelect all vertices inside the given parent or the default parent.
selectCellsSelects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
selectCellForEventSelects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
selectCellsForEventSelects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Selection state
createHandlerCreates a new handler for the given cell state.
createVertexHandlerHooks to create a new mxVertexHandler for the given mxCellState.
createEdgeHandlerHooks to create a new mxEdgeHandler for the given mxCellState.
createEdgeSegmentHandlerHooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.
createElbowEdgeHandlerHooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph events
addMouseListenerAdds a listener to the graph event dispatch loop.
removeMouseListenerRemoves the specified graph listener.
updateMouseEventSets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
getStateForEventReturns the state for the given touch event.
isEventIgnoredReturns true if the event should be ignored in fireMouseEvent.
isSyntheticEventIgnoredHook for ignoring synthetic mouse events after touchend in Firefox.
isEventSourceIgnoredReturns true if the event should be ignored in fireMouseEvent.
getEventStateReturns the mxCellState to be used when firing the mouse event for the given state.
fireMouseEventDispatches the given event in the graph event dispatch loop.
consumeMouseEventConsumes the given mxMouseEvent if it’s a touchStart event.
fireGestureEventDispatches a mxEvent.GESTURE event.
destroyDestroys the graph and all its resources.

Events

mxEvent.ROOT

Fires if the root in the model has changed.  This event has no properties.

mxEvent.ALIGN_CELLS

Fires between begin- and endUpdate in alignCells.  The <code>cells</code> and <code>align</code> properties contain the respective arguments that were passed to alignCells.

mxEvent.FLIP_EDGE

Fires between begin- and endUpdate in flipEdge.  The <code>edge</code> property contains the edge passed to flipEdge.

mxEvent.ORDER_CELLS

Fires between begin- and endUpdate in orderCells.  The <code>cells</code> and <code>back</code> properties contain the respective arguments that were passed to orderCells.

mxEvent.CELLS_ORDERED

Fires between begin- and endUpdate in cellsOrdered.  The <code>cells</code> and <code>back</code> arguments contain the respective arguments that were passed to cellsOrdered.

mxEvent.GROUP_CELLS

Fires between begin- and endUpdate in groupCells.  The <code>group</code>, <code>cells</code> and <code>border</code> arguments contain the respective arguments that were passed to groupCells.

mxEvent.UNGROUP_CELLS

Fires between begin- and endUpdate in ungroupCells.  The <code>cells</code> property contains the array of cells that was passed to ungroupCells.

mxEvent.REMOVE_CELLS_FROM_PARENT

Fires between begin- and endUpdate in removeCellsFromParent.  The <code>cells</code> property contains the array of cells that was passed to removeCellsFromParent.

mxEvent.ADD_CELLS

Fires between begin- and endUpdate in addCells.  The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code> and <code>target</code> properties contain the respective arguments that were passed to addCells.

mxEvent.CELLS_ADDED

Fires between begin- and endUpdate in cellsAdded.  The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code>, <code>target</code> and <code>absolute</code> properties contain the respective arguments that were passed to cellsAdded.

mxEvent.REMOVE_CELLS

Fires between begin- and endUpdate in removeCells.  The <code>cells</code> and <code>includeEdges</code> arguments contain the respective arguments that were passed to removeCells.

mxEvent.CELLS_REMOVED

Fires between begin- and endUpdate in cellsRemoved.  The <code>cells</code> argument contains the array of cells that was removed.

mxEvent.SPLIT_EDGE

Fires between begin- and endUpdate in splitEdge.  The <code>edge</code> property contains the edge to be splitted, the <code>cells</code>, <code>newEdge</code>, <code>dx</code> and <code>dy</code> properties contain the respective arguments that were passed to splitEdge.

mxEvent.TOGGLE_CELLS

Fires between begin- and endUpdate in toggleCells.  The <code>show</code>, <code>cells</code> and <code>includeEdges</code> properties contain the respective arguments that were passed to toggleCells.

mxEvent.FOLD_CELLS

Fires between begin- and endUpdate in foldCells.  The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to foldCells.

mxEvent.CELLS_FOLDED

Fires between begin- and endUpdate in cellsFolded.  The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to cellsFolded.

mxEvent.UPDATE_CELL_SIZE

Fires between begin- and endUpdate in updateCellSize.  The <code>cell</code> and <code>ignoreChildren</code> properties contain the respective arguments that were passed to updateCellSize.

mxEvent.RESIZE_CELLS

Fires between begin- and endUpdate in resizeCells.  The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to resizeCells.

mxEvent.CELLS_RESIZED

Fires between begin- and endUpdate in cellsResized.  The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to cellsResized.

mxEvent.MOVE_CELLS

Fires between begin- and endUpdate in moveCells.  The <code>cells</code>, <code>dx</code>, <code>dy</code>, <code>clone</code>, <code>target</code> and <code>event</code> properties contain the respective arguments that were passed to moveCells.

mxEvent.CELLS_MOVED

Fires between begin- and endUpdate in cellsMoved.  The <code>cells</code>, <code>dx</code>, <code>dy</code> and <code>disconnect</code> properties contain the respective arguments that were passed to cellsMoved.

mxEvent.CONNECT_CELL

Fires between begin- and endUpdate in connectCell.  The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to connectCell.

mxEvent.CELL_CONNECTED

Fires between begin- and endUpdate in cellConnected.  The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to cellConnected.

mxEvent.REFRESH

Fires after refresh was executed.  This event has no properties.

mxEvent.CLICK

Fires in click after a click event.  The <code>event</code> property contains the original mouse event and <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.DOUBLE_CLICK

Fires in dblClick after a double click.  The <code>event</code> property contains the original mouse event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.GESTURE

Fires in fireGestureEvent after a touch gesture.  The <code>event</code> property contains the original gesture end event and the <code>cell</code> property contains the optional cell associated with the gesture.

mxEvent.TAP_AND_HOLD

Fires in tapAndHold if a tap and hold event was detected.  The <code>event</code> property contains the initial touch event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.FIRE_MOUSE_EVENT

Fires in fireMouseEvent before the mouse listeners are invoked.  The <code>eventName</code> property contains the event name and the <code>event</code> property contains the mxMouseEvent.

mxEvent.SIZE

Fires after sizeDidChange was executed.  The <code>bounds</code> property contains the new graph bounds.

mxEvent.START_EDITING

Fires before the in-place editor starts in startEditingAtCell.  The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.

mxEvent.EDITING_STARTED

Fires after the in-place editor starts in startEditingAtCell.  The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.

mxEvent.EDITING_STOPPED

Fires after the in-place editor stops in stopEditing.

mxEvent.LABEL_CHANGED

Fires between begin- and endUpdate in cellLabelChanged.  The <code>cell</code> property contains the cell, the <code>value</code> property contains the new value for the cell, the <code>old</code> property contains the old value and the optional <code>event</code> property contains the mouse event that started the edit.

mxEvent.ADD_OVERLAY

Fires after an overlay is added in addCellOverlay.  The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was added.

mxEvent.REMOVE_OVERLAY

Fires after an overlay is removed in removeCellOverlay and removeCellOverlays.  The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was removed.

mxGraph

function mxGraph(container,
model,
renderHint,
stylesheet)

Constructs a new mxGraph in the specified container.  Model is an optional mxGraphModel.  If no model is provided, a new mxGraphModel instance is used as the model.  The container must have a valid owner document prior to calling this function in Internet Explorer.  RenderHint is a string to affect the display performance and rendering in IE, but not in SVG-based browsers.  The parameter is mapped to dialect, which may be one of mxConstants.DIALECT_SVG for SVG-based browsers, mxConstants.DIALECT_STRICTHTML for fastest display mode, mxConstants.DIALECT_PREFERHTML for faster display mode, mxConstants.DIALECT_MIXEDHTML for fast and mxConstants.DIALECT_VML for exact display mode (slowest).  The dialects are defined in mxConstants.  The default values are DIALECT_SVG for SVG-based browsers and DIALECT_MIXED for IE.

The possible values for the renderingHint parameter are explained below

fastThe parameter is based on the fact that the display performance is highly improved in IE if the VML is not contained within a VML group element.  The lack of a group element only slightly affects the display while panning, but improves the performance by almost a factor of 2, while keeping the display sufficiently accurate.  This also allows to render certain shapes as HTML if the display accuracy is not affected, which is implemented by <mxShape.isMixedModeHtml>.  This is the default setting and is mapped to DIALECT_MIXEDHTML.
fasterSame as fast, but more expensive shapes are avoided.  This is controlled by <mxShape.preferModeHtml>.  The default implementation will avoid gradients and rounded rectangles, but more significant shapes, such as rhombus, ellipse, actor and cylinder will be rendered accurately.  This setting is mapped to DIALECT_PREFERHTML.
fastestAlmost anything will be rendered in Html.  This allows for rectangles, labels and images.  This setting is mapped to DIALECT_STRICTHTML.
exactIf accurate panning is required and if the diagram is small (up to 100 cells), then this value should be used.  In this mode, a group is created that contains the VML.  This allows for accurate panning and is mapped to DIALECT_VML.

Example

To create a graph inside a DOM node with an id of graph

var container = document.getElementById('graph');
var graph = new mxGraph(container);

Parameters

containerOptional DOM node that acts as a container for the graph.  If this is null then the container can be initialized later using init.
modelOptional mxGraphModel that constitutes the graph data.
renderHintOptional string that specifies the display accuracy and performance.  Default is mxConstants.DIALECT_MIXEDHTML (for IE).
stylesheetOptional mxStylesheet to be used in the graph.

Variables

mouseListeners

mxGraph.prototype.mouseListeners

Holds the mouse event listeners.  See fireMouseEvent.

isMouseDown

mxGraph.prototype.isMouseDown

Holds the state of the mouse button.

model

mxGraph.prototype.model

Holds the mxGraphModel that contains the cells to be displayed.

view

mxGraph.prototype.view

Holds the mxGraphView that caches the mxCellStates for the cells.

stylesheet

mxGraph.prototype.stylesheet

Holds the mxStylesheet that defines the appearance of the cells.

Example

Use the following code to read a stylesheet into an existing graph.

var req = mxUtils.load('stylesheet.xml');
var root = req.getDocumentElement();
var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.stylesheet);

selectionModel

mxGraph.prototype.selectionModel

Holds the mxGraphSelectionModel that models the current selection.

cellEditor

mxGraph.prototype.cellEditor

Holds the mxCellEditor that is used as the in-place editing.

cellRenderer

mxGraph.prototype.cellRenderer

Holds the mxCellRenderer for rendering the cells in the graph.

multiplicities

mxGraph.prototype.multiplicities

An array of mxMultiplicities describing the allowed connections in a graph.

renderHint

mxGraph.prototype.renderHint

RenderHint as it was passed to the constructor.

dialect

mxGraph.prototype.dialect

Dialect to be used for drawing the graph.  Possible values are all constants in mxConstants with a DIALECT-prefix.

gridSize

mxGraph.prototype.gridSize

Specifies the grid size.  Default is 10.

gridEnabled

mxGraph.prototype.gridEnabled

Specifies if the grid is enabled.  This is used in snap.  Default is true.

portsEnabled

mxGraph.prototype.portsEnabled

Specifies if ports are enabled.  This is used in cellConnected to update the respective style.  Default is true.

nativeDoubleClickEnabled

Specifies if native double click events should be detected.  Default is true.

doubleTapEnabled

mxGraph.prototype.doubleTapEnabled

Specifies if double taps on touch-based devices should be handled as a double click.  Default is true.

doubleTapTimeout

mxGraph.prototype.doubleTapTimeout

Specifies the timeout for double taps and non-native double clicks.  Default is 500 ms.

doubleTapTolerance

mxGraph.prototype.doubleTapTolerance

Specifies the tolerance for double taps and double clicks in quirks mode.  Default is 25 pixels.

lastTouchX

Holds the x-coordinate of the last touch event for double tap detection.

lastTouchX

Holds the y-coordinate of the last touch event for double tap detection.

lastTouchTime

mxGraph.prototype.lastTouchTime

Holds the time of the last touch event for double click detection.

tapAndHoldEnabled

mxGraph.prototype.tapAndHoldEnabled

Specifies if tap and hold should be used for starting connections on touch-based devices.  Default is true.

tapAndHoldDelay

mxGraph.prototype.tapAndHoldDelay

Specifies the time for a tap and hold.  Default is 500 ms.

tapAndHoldInProgress

mxGraph.prototype.tapAndHoldInProgress

True if the timer for tap and hold events is running.

tapAndHoldValid

mxGraph.prototype.tapAndHoldValid

True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.

initialTouchX

mxGraph.prototype.initialTouchX

Holds the x-coordinate of the intial touch event for tap and hold.

initialTouchY

mxGraph.prototype.initialTouchY

Holds the y-coordinate of the intial touch event for tap and hold.

tolerance

mxGraph.prototype.tolerance

Tolerance for a move to be handled as a single click.  Default is 4 pixels.

defaultOverlap

mxGraph.prototype.defaultOverlap

Value returned by getOverlap if isAllowOverlapParent returns true for the given cell.  getOverlap is used in constrainChild if isConstrainChild returns true.  The value specifies the portion of the child which is allowed to overlap the parent.

defaultParent

mxGraph.prototype.defaultParent

Specifies the default parent to be used to insert new cells.  This is used in getDefaultParent.  Default is null.

alternateEdgeStyle

mxGraph.prototype.alternateEdgeStyle

Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.  Default is null.

backgroundImage

mxGraph.prototype.backgroundImage

Specifies the mxImage to be returned by getBackgroundImage.  Default is null.

Example

var img = new mxImage('http://www.example.com/maps/examplemap.jpg', 1024, 768);
graph.setBackgroundImage(img);
graph.view.validate();

pageVisible

mxGraph.prototype.pageVisible

Specifies if the background page should be visible.  Default is false.  Not yet implemented.

pageBreaksVisible

mxGraph.prototype.pageBreaksVisible

Specifies if a dashed line should be drawn between multiple pages.  Default is false.  If you change this value while a graph is being displayed then you should call sizeDidChange to force an update of the display.

pageBreakColor

mxGraph.prototype.pageBreakColor

Specifies the color for page breaks.  Default is ‘gray’.

pageBreakDashed

mxGraph.prototype.pageBreakDashed

Specifies the page breaks should be dashed.  Default is true.

minPageBreakDist

mxGraph.prototype.minPageBreakDist

Specifies the minimum distance for page breaks to be visible.  Default is 20 (in pixels).

preferPageSize

mxGraph.prototype.preferPageSize

Specifies if the graph size should be rounded to the next page number in sizeDidChange.  This is only used if the graph container has scrollbars.  Default is false.

pageFormat

mxGraph.prototype.pageFormat

Specifies the page format for the background page.  Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT.  This is used as the default in mxPrintPreview and for painting the background page if pageVisible is true and the pagebreaks if pageBreaksVisible is true.

pageScale

mxGraph.prototype.pageScale

Specifies the scale of the background page.  Default is 1.5.  Not yet implemented.

enabled

mxGraph.prototype.enabled

Specifies the return value for isEnabled.  Default is true.

escapeEnabled

mxGraph.prototype.escapeEnabled

Specifies if mxKeyHandler should invoke escape when the escape key is pressed.  Default is true.

invokesStopCellEditing

mxGraph.prototype.invokesStopCellEditing

If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.  This is implemented in a focus handler in mxCellEditor.  Default is true.

enterStopsCellEditing

mxGraph.prototype.enterStopsCellEditing

If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.  This is used in mxCellEditor to stop cell editing.  Note: You can always use F2 and escape to stop editing.  Default is false.

useScrollbarsForPanning

mxGraph.prototype.useScrollbarsForPanning

Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available.  If scrollbars are enabled in CSS, but no scrollbars appear because the graph is smaller than the container size, then no panning occurs if this is true.  Default is true.

exportEnabled

mxGraph.prototype.exportEnabled

Specifies the return value for canExportCell.  Default is true.

importEnabled

mxGraph.prototype.importEnabled

Specifies the return value for canImportCell.  Default is true.

cellsLocked

mxGraph.prototype.cellsLocked

Specifies the return value for isCellLocked.  Default is false.

cellsCloneable

mxGraph.prototype.cellsCloneable

Specifies the return value for isCellCloneable.  Default is true.

foldingEnabled

mxGraph.prototype.foldingEnabled

Specifies if folding (collapse and expand via an image icon in the graph should be enabled).  Default is true.

cellsEditable

mxGraph.prototype.cellsEditable

Specifies the return value for isCellEditable.  Default is true.

cellsDeletable

mxGraph.prototype.cellsDeletable

Specifies the return value for isCellDeletable.  Default is true.

cellsMovable

mxGraph.prototype.cellsMovable

Specifies the return value for isCellMovable.  Default is true.

edgeLabelsMovable

mxGraph.prototype.edgeLabelsMovable

Specifies the return value for edges in isLabelMovable.  Default is true.

vertexLabelsMovable

mxGraph.prototype.vertexLabelsMovable

Specifies the return value for vertices in isLabelMovable.  Default is false.

dropEnabled

mxGraph.prototype.dropEnabled

Specifies the return value for isDropEnabled.  Default is false.

splitEnabled

mxGraph.prototype.splitEnabled

Specifies if dropping onto edges should be enabled.  This is ignored if dropEnabled is false.  If enabled, it will call splitEdge to carry out the drop operation.  Default is true.

cellsResizable

mxGraph.prototype.cellsResizable

Specifies the return value for isCellResizable.  Default is true.

cellsBendable

mxGraph.prototype.cellsBendable

Specifies the return value for isCellsBendable.  Default is true.

cellsSelectable

mxGraph.prototype.cellsSelectable

Specifies the return value for isCellSelectable.  Default is true.

cellsDisconnectable

mxGraph.prototype.cellsDisconnectable

Specifies the return value for <isCellDisconntable>.  Default is true.

autoSizeCells

mxGraph.prototype.autoSizeCells

Specifies if the graph should automatically update the cell size after an edit.  This is used in isAutoSizeCell.  Default is false.

autoSizeCellsOnAdd

mxGraph.prototype.autoSizeCellsOnAdd

Specifies if autoSize style should be applied when cells are added.  Default is false.

autoScroll

mxGraph.prototype.autoScroll

Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.  This is only taken into account if the container has scrollbars.  Default is true.

If you need this to work without scrollbars then set ignoreScrollbars to true.  Please consult the ignoreScrollbars for details.  In general, with no scrollbars, the use of allowAutoPanning is recommended.

ignoreScrollbars

mxGraph.prototype.ignoreScrollbars

Specifies if the graph should automatically scroll regardless of the scrollbars.  This will scroll the container using positive values for scroll positions (ie usually only rightwards and downwards).  To avoid possible conflicts with panning, set translateToScrollPosition to true.

translateToScrollPosition

mxGraph.prototype.translateToScrollPosition

Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.  This can be used to avoid conflicts when using autoScroll and ignoreScrollbars with no scrollbars in the container.

timerAutoScroll

mxGraph.prototype.timerAutoScroll

Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.  This disables scrollPointToVisible and uses mxPanningManager instead.  If this is true then autoExtend is disabled.  It should only be used with a scroll buffer or when scollbars are visible and scrollable in all directions.  Default is false.

allowAutoPanning

mxGraph.prototype.allowAutoPanning

Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.  To enable panning inside the container, near the edge, set mxPanningManager.border to a positive value.  Default is false.

autoExtend

mxGraph.prototype.autoExtend

Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.  This is only taken into account if the container has scrollbars.  Default is true.  See autoScroll.

maximumGraphBounds

mxGraph.prototype.maximumGraphBounds

mxRectangle that specifies the area in which all cells in the diagram should be placed.  Uses in getMaximumGraphBounds.  Use a width or height of 0 if you only want to give a upper, left corner.

minimumGraphSize

mxGraph.prototype.minimumGraphSize

mxRectangle that specifies the minimum size of the graph.  This is ignored if the graph container has no scrollbars.  Default is null.

minimumContainerSize

mxGraph.prototype.minimumContainerSize

mxRectangle that specifies the minimum size of the <container> if resizeContainer is true.

maximumContainerSize

mxGraph.prototype.maximumContainerSize

mxRectangle that specifies the maximum size of the container if resizeContainer is true.

resizeContainer

mxGraph.prototype.resizeContainer

Specifies if the container should be resized to the graph size when the graph size has changed.  Default is false.

border

mxGraph.prototype.border

Border to be added to the bottom and right side when the container is being resized after the graph has been changed.  Default is 0.

keepEdgesInForeground

mxGraph.prototype.keepEdgesInForeground

Specifies if edges should appear in the foreground regardless of their order in the model.  If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied.  Default is false.

keepEdgesInBackground

mxGraph.prototype.keepEdgesInBackground

Specifies if edges should appear in the background regardless of their order in the model.  If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied.  Default is false.

allowNegativeCoordinates

mxGraph.prototype.allowNegativeCoordinates

Specifies if negative coordinates for vertices are allowed.  Default is true.

constrainChildren

mxGraph.prototype.constrainChildren

Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.  Default is true.

constrainRelativeChildren

mxGraph.prototype.constrainRelativeChildren

Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.  Default is false.

extendParents

mxGraph.prototype.extendParents

Specifies if a parent should contain the child bounds after a resize of the child.  Default is true.  This has precedence over constrainChildren.

extendParentsOnAdd

mxGraph.prototype.extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added.  Default is true.

extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added.  Default is false for backwards compatiblity.

recursiveResize

mxGraph.prototype.recursiveResize

Specifies the return value for isRecursiveResize.  Default is false for backwards compatiblity.

collapseToPreferredSize

mxGraph.prototype.collapseToPreferredSize

Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.  Default is true.

zoomFactor

mxGraph.prototype.zoomFactor

Specifies the factor used for zoomIn and zoomOut.  Default is 1.2 (120%).

keepSelectionVisibleOnZoom

mxGraph.prototype.keepSelectionVisibleOnZoom

Specifies if the viewport should automatically contain the selection cells after a zoom operation.  Default is false.

centerZoom

mxGraph.prototype.centerZoom

Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.  Default is true.

resetViewOnRootChange

mxGraph.prototype.resetViewOnRootChange

Specifies if the scale and translate should be reset if the root changes in the model.  Default is true.

resetEdgesOnResize

mxGraph.prototype.resetEdgesOnResize

Specifies if edge control points should be reset after the resize of a connected cell.  Default is false.

resetEdgesOnMove

mxGraph.prototype.resetEdgesOnMove

Specifies if edge control points should be reset after the move of a connected cell.  Default is false.

resetEdgesOnConnect

mxGraph.prototype.resetEdgesOnConnect

Specifies if edge control points should be reset after the the edge has been reconnected.  Default is true.

allowLoops

mxGraph.prototype.allowLoops

Specifies if loops (aka self-references) are allowed.  Default is false.

defaultLoopStyle

mxGraph.prototype.defaultLoopStyle

mxEdgeStyle to be used for loops.  This is a fallback for loops if the mxConstants.STYLE_LOOP is undefined.  Default is mxEdgeStyle.Loop.

multigraph

mxGraph.prototype.multigraph

Specifies if multiple edges in the same direction between the same pair of vertices are allowed.  Default is true.

connectableEdges

mxGraph.prototype.connectableEdges

Specifies if edges are connectable.  Default is false.  This overrides the connectable field in edges.

allowDanglingEdges

mxGraph.prototype.allowDanglingEdges

Specifies if edges with disconnected terminals are allowed in the graph.  Default is true.

cloneInvalidEdges

mxGraph.prototype.cloneInvalidEdges

Specifies if edges that are cloned should be validated and only inserted if they are valid.  Default is true.

disconnectOnMove

mxGraph.prototype.disconnectOnMove

Specifies if edges should be disconnected from their terminals when they are moved.  Default is true.

labelsVisible

mxGraph.prototype.labelsVisible

Specifies if labels should be visible.  This is used in getLabel.  Default is true.

htmlLabels

mxGraph.prototype.htmlLabels

Specifies the return value for isHtmlLabel.  Default is false.

swimlaneSelectionEnabled

mxGraph.prototype.swimlaneSelectionEnabled

Specifies if swimlanes should be selectable via the content if the mouse is released.  Default is true.

swimlaneNesting

mxGraph.prototype.swimlaneNesting

Specifies if nesting of swimlanes is allowed.  Default is true.

swimlaneIndicatorColorAttribute

mxGraph.prototype.swimlaneIndicatorColorAttribute

The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.  Default is mxConstants.STYLE_FILLCOLOR.

imageBundles

mxGraph.prototype.imageBundles

Holds the list of image bundles.

minFitScale

mxGraph.prototype.minFitScale

Specifies the minimum scale to be applied in fit.  Default is 0.1.  Set this to null to allow any value.

maxFitScale

mxGraph.prototype.maxFitScale

Specifies the maximum scale to be applied in fit.  Default is 8.  Set this to null to allow any value.

panDx

mxGraph.prototype.panDx

Current horizontal panning value.  Default is 0.

panDy

mxGraph.prototype.panDy

Current vertical panning value.  Default is 0.

collapsedImage

mxGraph.prototype.collapsedImage

Specifies the mxImage to indicate a collapsed state.  Default value is mxClient.imageBasePath + ‘/collapsed.gif’

expandedImage

mxGraph.prototype.expandedImage

Specifies the mxImage to indicate a expanded state.  Default value is mxClient.imageBasePath + ‘/expanded.gif’

warningImage

mxGraph.prototype.warningImage

Specifies the mxImage for the image to be used to display a warning overlay.  See setCellWarning.  Default value is mxClient.imageBasePath + ‘/warning’.  The extension for the image depends on the platform.  It is ‘.png’ on the Mac and ‘.gif’ on all other platforms.

alreadyConnectedResource

mxGraph.prototype.alreadyConnectedResource

Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘alreadyConnected’.

containsValidationErrorsResource

mxGraph.prototype.containsValidationErrorsResource

Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.  If the resource for this key does not exist then the value is used as the warning message.  Default is ‘containsValidationErrors’.

collapseExpandResource

mxGraph.prototype.collapseExpandResource

Specifies the resource key for the tooltip on the collapse/expand icon.  If the resource for this key does not exist then the value is used as the tooltip.  Default is ‘collapse-expand’.

init

mxGraph.prototype.init = function(container)

Initializes the <container> and creates the respective datastructures.

Parameters

containerDOM node that will contain the graph display.

createHandlers

mxGraph.prototype.createHandlers = function()

Creates the tooltip-, panning-, connection- and graph-handler (in this order).  This is called in the constructor before init is called.

createTooltipHandler

mxGraph.prototype.createTooltipHandler = function()

Creates and returns a new mxTooltipHandler to be used in this graph.

createSelectionCellsHandler

mxGraph.prototype.createSelectionCellsHandler = function()

Creates and returns a new mxTooltipHandler to be used in this graph.

createConnectionHandler

mxGraph.prototype.createConnectionHandler = function()

Creates and returns a new mxConnectionHandler to be used in this graph.

createGraphHandler

mxGraph.prototype.createGraphHandler = function()

Creates and returns a new mxGraphHandler to be used in this graph.

createPanningHandler

mxGraph.prototype.createPanningHandler = function()

Creates and returns a new mxPanningHandler to be used in this graph.

createPopupMenuHandler

mxGraph.prototype.createPopupMenuHandler = function()

Creates and returns a new mxPopupMenuHandler to be used in this graph.

createSelectionModel

mxGraph.prototype.createSelectionModel = function()

Creates a new mxGraphSelectionModel to be used in this graph.

createStylesheet

mxGraph.prototype.createStylesheet = function()

Creates a new mxGraphSelectionModel to be used in this graph.

createGraphView

mxGraph.prototype.createGraphView = function()

Creates a new mxGraphView to be used in this graph.

createCellRenderer

mxGraph.prototype.createCellRenderer = function()

Creates a new mxCellRenderer to be used in this graph.

createCellEditor

mxGraph.prototype.createCellEditor = function()

Creates a new mxCellEditor to be used in this graph.

getModel

mxGraph.prototype.getModel = function()

Returns the mxGraphModel that contains the cells.

getView

mxGraph.prototype.getView = function()

Returns the mxGraphView that contains the mxCellStates.

getStylesheet

mxGraph.prototype.getStylesheet = function()

Returns the mxStylesheet that defines the style.

setStylesheet

mxGraph.prototype.setStylesheet = function(stylesheet)

Sets the mxStylesheet that defines the style.

getSelectionModel

mxGraph.prototype.getSelectionModel = function()

Returns the mxGraphSelectionModel that contains the selection.

setSelectionModel

mxGraph.prototype.setSelectionModel = function(selectionModel)

Sets the <mxSelectionModel> that contains the selection.

getSelectionCellsForChanges

mxGraph.prototype.getSelectionCellsForChanges = function(changes)

Returns the cells to be selected for the given array of changes.

graphModelChanged

mxGraph.prototype.graphModelChanged = function(changes)

Called when the graph model changes.  Invokes processChange on each item of the given array to update the view accordingly.

Parameters

changesArray that contains the individual changes.

updateSelection

mxGraph.prototype.updateSelection = function()

Removes selection cells that are not in the model from the selection.

processChange

mxGraph.prototype.processChange = function(change)

Processes the given change and invalidates the respective cached data in view.  This fires a <root> event if the root has changed in the model.

Parameters

changeObject that represents the change on the model.

removeStateForCell

mxGraph.prototype.removeStateForCell = function(cell)

Removes all cached information for the given cell and its descendants.  This is called when a cell was removed from the model.

Paramters

cellmxCell that was removed from the model.

Overlays

addCellOverlay

mxGraph.prototype.addCellOverlay = function(cell,
overlay)

Adds an mxCellOverlay for the specified cell.  This method fires an <addoverlay> event and returns the new mxCellOverlay.

Parameters

cellmxCell to add the overlay for.
overlaymxCellOverlay to be added for the cell.

getCellOverlays

mxGraph.prototype.getCellOverlays = function(cell)

Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.

Parameters

cellmxCell whose overlays should be returned.

removeCellOverlay

mxGraph.prototype.removeCellOverlay = function(cell,
overlay)

Removes and returns the given mxCellOverlay from the given cell.  This method fires a <removeoverlay> event.  If no overlay is given, then all overlays are removed using <removeOverlays>.

Parameters

cellmxCell whose overlay should be removed.
overlayOptional mxCellOverlay to be removed.

removeCellOverlays

mxGraph.prototype.removeCellOverlays = function(cell)

Removes all mxCellOverlays from the given cell.  This method fires a <removeoverlay> event for each mxCellOverlay and returns the array of mxCellOverlays that was removed from the cell.

Parameters

cellmxCell whose overlays should be removed

clearCellOverlays

mxGraph.prototype.clearCellOverlays = function(cell)

Removes all mxCellOverlays in the graph for the given cell and all its descendants.  If no cell is specified then all overlays are removed from the graph.  This implementation uses removeCellOverlays to remove the overlays from the individual cells.

Parameters

cellOptional mxCell that represents the root of the subtree to remove the overlays from.  Default is the root in the model.

setCellWarning

mxGraph.prototype.setCellWarning = function(cell,
warning,
img,
isSelect)

Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.  The warning is displayed as a tooltip in a red font and may contain HTML markup.  If the warning is null or a zero length string, then all overlays are removed from the cell.

Example

graph.setCellWarning(cell, '<b>Warning:</b>: Hello, World!');

Parameters

cellmxCell whose warning should be set.
warningString that represents the warning to be displayed.
imgOptional mxImage to be used for the overlay.  Default is warningImage.
isSelectOptional boolean indicating if a click on the overlay should select the corresponding cell.  Default is false.

In-place editing

startEditing

mxGraph.prototype.startEditing = function(evt)

Calls startEditingAtCell using the given cell or the first selection cell.

Parameters

evtOptional mouse event that triggered the editing.

startEditingAtCell

mxGraph.prototype.startEditingAtCell = function(cell,
evt)

Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>.  After editing was started, a <editingStarted> event is fired.

Parameters

cellmxCell to start the in-place editor for.
evtOptional mouse event that triggered the editing.

getEditingValue

mxGraph.prototype.getEditingValue = function(cell,
evt)

Returns the initial value for in-place editing.  This implementation returns convertValueToString for the given cell.  If this function is overridden, then mxGraphModel.valueForCellChanged should take care of correctly storing the actual new value inside the user object.

Parameters

cellmxCell for which the initial editing value should be returned.
evtOptional mouse event that triggered the editor.

stopEditing

mxGraph.prototype.stopEditing = function(cancel)

Stops the current editing and fires a <editingStopped> event.

Parameters

cancelBoolean that specifies if the current editing value should be stored.

labelChanged

mxGraph.prototype.labelChanged = function(cell,
value,
evt)

Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.  Returns the cell whose label was changed.

Parameters

cellmxCell whose label should be changed.
valueNew label to be assigned.
evtOptional event that triggered the change.

cellLabelChanged

mxGraph.prototype.cellLabelChanged = function(cell,
value,
autoSize)

Sets the new label for a cell.  If autoSize is true then cellSizeUpdated will be called.

In the following example, the function is extended to map changes to attributes in an XML node, as shown in convertValueToString.  Alternatively, the handling of this can be implemented as shown in mxGraphModel.valueForCellChanged without the need to clone the user object.

var graphCellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize)
{
 // Cloned for correct undo/redo
 var elt = cell.value.cloneNode(true);
 elt.setAttribute('label', newValue);

 newValue = elt;
 graphCellLabelChanged.apply(this, arguments);
};

Parameters

cellmxCell whose label should be changed.
valueNew label to be assigned.
autoSizeBoolean that specifies if cellSizeUpdated should be called.

Event processing

escape

mxGraph.prototype.escape = function(evt)

Processes an escape keystroke.

Parameters

evtMouseevent that represents the keystroke.

click

mxGraph.prototype.click = function(me)

Processes a singleclick on an optional cell and fires a click event.  The click event is fired initially.  If the graph is enabled and the event has not been consumed, then the cell is selected using selectCellForEvent or the selection is cleared using clearSelection.  The events consumed state is set to true if the corresponding mxMouseEvent has been consumed.

To handle a click event, use the following code.

graph.addListener(mxEvent.CLICK, function(sender, evt)
{
  var e = evt.getProperty('event'); // mouse event
  var cell = evt.getProperty('cell'); // cell may be null

  if (cell != null)
  {
    // Do something useful with cell and consume the event
    evt.consume();
  }
});

Parameters

memxMouseEvent that represents the single click.

dblClick

mxGraph.prototype.dblClick = function(evt,
cell)

Processes a doubleclick on an optional cell and fires a <dblclick> event.  The event is fired initially.  If the graph is enabled and the event has not been consumed, then <edit> is called with the given cell.  The event is ignored if no cell was specified.

Example for overriding this method.

graph.dblClick = function(evt, cell)
{
  var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
  this.fireEvent(mxe);

  if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed())
  {
    mxUtils.alert('Hello, World!');
    mxe.consume();
  }
}

Example listener for this event.

graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt)
{
  var cell = evt.getProperty('cell');
  // do something with the cell and consume the
  // event to prevent in-place editing from start
});

Parameters

evtMouseevent that represents the doubleclick.
cellOptional mxCell under the mousepointer.

tapAndHold

mxGraph.prototype.tapAndHold = function(me)

Handles the mxMouseEvent by highlighting the mxCellState.

Parameters

memxMouseEvent that represents the touch event.
stateOptional mxCellState that is associated with the event.

scrollPointToVisible

mxGraph.prototype.scrollPointToVisible = function(x,
y,
extend,
border)

Scrolls the graph to the given point, extending the graph container if specified.

createPanningManager

mxGraph.prototype.createPanningManager = function()

Creates and returns an mxPanningManager.

getBorderSizes

mxGraph.prototype.getBorderSizes = function()

Returns the size of the border and padding on all four sides of the container.  The left, top, right and bottom borders are stored in the x, y, width and height of the returned mxRectangle, respectively.

getPreferredPageSize

mxGraph.prototype.getPreferredPageSize = function(bounds,
width,
height)

Returns the preferred size of the background page if preferPageSize is true.

fit

mxGraph.prototype.fit = function(border,
keepOrigin,
margin,
enabled,
ignoreWidth,
ignoreHeight,
maxHeight)

Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view.  To fit an initial graph prior to rendering, set mxGraphView.rendering to false prior to changing the model and execute the following after changing the model.

graph.fit();
graph.view.rendering = true;
graph.refresh();

To fit and center the graph, the following code can be used.

var margin = 2;
var max = 3;

var bounds = graph.getGraphBounds();
var cw = graph.container.clientWidth - margin;
var ch = graph.container.clientHeight - margin;
var w = bounds.width / graph.view.scale;
var h = bounds.height / graph.view.scale;
var s = Math.min(max, Math.min(cw / w, ch / h));

graph.view.scaleAndTranslate(s,
  (margin + cw - w * s) / (2 * s) - bounds.x / graph.view.scale,
  (margin + ch - h * s) / (2 * s) - bounds.y / graph.view.scale);

Parameters

borderOptional number that specifies the border.  Default is border.
keepOriginOptional boolean that specifies if the translate should be changed.  Default is false.
marginOptional margin in pixels.  Default is 0.
enabledOptional boolean that specifies if the scale should be set or just returned.  Default is true.
ignoreWidthOptional boolean that specifies if the width should be ignored.  Default is false.
ignoreHeightOptional boolean that specifies if the height should be ignored.  Default is false.
maxHeightOptional maximum height.

sizeDidChange

mxGraph.prototype.sizeDidChange = function()

Called when the size of the graph has changed.  This implementation fires a <size> event after updating the clipping region of the SVG element in SVG-bases browsers.

doResizeContainer

mxGraph.prototype.doResizeContainer = function(width,
height)

Resizes the container for the given graph width and height.

updatePageBreaks

mxGraph.prototype.updatePageBreaks = function(visible,
width,
height)

Invokes from sizeDidChange to redraw the page breaks.

Parameters

visibleBoolean that specifies if page breaks should be shown.
widthSpecifies the width of the container in pixels.
heightSpecifies the height of the container in pixels.

Cell styles

getCellStyle

mxGraph.prototype.getCellStyle = function(cell)

Returns an array of key, value pairs representing the cell style for the given cell.  If no string is defined in the model that specifies the style, then the default style for the cell is returned or an empty object, if no style can be found.  Note: You should try and get the cell state for the given cell and use the cached style in the state before using this method.

Parameters

cellmxCell whose style should be returned as an array.

postProcessCellStyle

mxGraph.prototype.postProcessCellStyle = function(style)

Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.

setCellStyle

mxGraph.prototype.setCellStyle = function(style,
cells)

Sets the style of the specified cells.  If no cells are given, then the selection cells are changed.

Parameters

styleString representing the new style of the cells.
cellsOptional array of mxCells to set the style for.  Default is the selection cells.

toggleCellStyle

mxGraph.prototype.toggleCellStyle = function(key,
defaultValue,
cell)

Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.  If no cell is specified then the selection cell is used.

Parameter

keyString representing the key for the boolean value to be toggled.
defaultValueOptional boolean default value if no value is defined.  Default is false.
cellOptional mxCell whose style should be modified.  Default is the selection cell.

toggleCellStyles

mxGraph.prototype.toggleCellStyles = function(key,
defaultValue,
cells)

Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.  If no cells are specified, then the selection cells are used.  For example, this can be used to toggle mxConstants.STYLE_ROUNDED or any other style with a boolean value.

Parameter

keyString representing the key for the boolean value to be toggled.
defaultValueOptional boolean default value if no value is defined.  Default is false.
cellsOptional array of mxCells whose styles should be modified.  Default is the selection cells.

setCellStyles

mxGraph.prototype.setCellStyles = function(key,
value,
cells)

Sets the key to value in the styles of the given cells.  This will modify the existing cell styles in-place and override any existing assignment for the given key.  If no cells are specified, then the selection cells are changed.  If no value is specified, then the respective key is removed from the styles.

Parameters

keyString representing the key to be assigned.
valueString representing the new value for the key.
cellsOptional array of mxCells to change the style for.  Default is the selection cells.

toggleCellStyleFlags

mxGraph.prototype.toggleCellStyleFlags = function(key,
flag,
cells)

Toggles the given bit for the given key in the styles of the specified cells.

Parameters

keyString representing the key to toggle the flag in.
flagInteger that represents the bit to be toggled.
cellsOptional array of mxCells to change the style for.  Default is the selection cells.

setCellStyleFlags

mxGraph.prototype.setCellStyleFlags = function(key,
flag,
value,
cells)

Sets or toggles the given bit for the given key in the styles of the specified cells.

Parameters

keyString representing the key to toggle the flag in.
flagInteger that represents the bit to be toggled.
valueBoolean value to be used or null if the value should be toggled.
cellsOptional array of mxCells to change the style for.  Default is the selection cells.

Cell alignment and orientation

alignCells

mxGraph.prototype.alignCells = function(align,
cells,
param)

Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.

Parameters

alignSpecifies the alignment.  Possible values are all constants in mxConstants with an ALIGN prefix.
cellsArray of mxCells to be aligned.
paramOptional coordinate for the alignment.

flipEdge

mxGraph.prototype.flipEdge = function(edge)

Toggles the style of the given edge between null (or empty) and alternateEdgeStyle.  This method fires mxEvent.FLIP_EDGE while the transaction is in progress.  Returns the edge that was flipped.

Here is an example that overrides this implementation to invert the value of mxConstants.STYLE_ELBOW without removing any existing styles.

graph.flipEdge = function(edge)
{
  if (edge != null)
  {
    var state = this.view.getState(edge);
    var style = (state != null) ? state.style : this.getCellStyle(edge);

    if (style != null)
    {
      var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
          mxConstants.ELBOW_HORIZONTAL);
      var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
          mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
      this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
    }
  }
};

Parameters

edgemxCell whose style should be changed.

addImageBundle

mxGraph.prototype.addImageBundle = function(bundle)

Adds the specified mxImageBundle.

removeImageBundle

mxGraph.prototype.removeImageBundle = function(bundle)

Removes the specified mxImageBundle.

getImageFromBundles

mxGraph.prototype.getImageFromBundles = function(key)

Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.

Order

orderCells

mxGraph.prototype.orderCells = function(back,
cells)

Moves the given cells to the front or back.  The change is carried out using cellsOrdered.  This method fires mxEvent.ORDER_CELLS while the transaction is in progress.

Parameters

backBoolean that specifies if the cells should be moved to back.
cellsArray of mxCells to move to the background.  If null is specified then the selection cells are used.

cellsOrdered

mxGraph.prototype.cellsOrdered = function(cells,
back)

Moves the given cells to the front or back.  This method fires mxEvent.CELLS_ORDERED while the transaction is in progress.

Parameters

cellsArray of mxCells whose order should be changed.
backBoolean that specifies if the cells should be moved to back.

Grouping

groupCells

mxGraph.prototype.groupCells = function(group,
border,
cells)

Adds the cells into the given group.  The change is carried out using cellsAdded, cellsMoved and cellsResized.  This method fires mxEvent.GROUP_CELLS while the transaction is in progress.  Returns the new group.  A group is only created if there is at least one entry in the given array of cells.

Parameters

groupmxCell that represents the target group.  If null is specified then a new group is created using createGroupCell.
borderOptional integer that specifies the border between the child area and the group bounds.  Default is 0.
cellsOptional array of mxCells to be grouped.  If null is specified then the selection cells are used.

getCellsForGroup

mxGraph.prototype.getCellsForGroup = function(cells)

Returns the cells with the same parent as the first cell in the given array.

getBoundsForGroup

mxGraph.prototype.getBoundsForGroup = function(group,
children,
border)

Returns the bounds to be used for the given group and children.

createGroupCell

mxGraph.prototype.createGroupCell = function(cells)

Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.

The following code can be used to set the style of new group cells.

var graphCreateGroupCell = graph.createGroupCell;
graph.createGroupCell = function(cells)
{
  var group = graphCreateGroupCell.apply(this, arguments);
  group.setStyle('group');

  return group;
};

ungroupCells

mxGraph.prototype.ungroupCells = function(cells)

Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups.  Returns the children that have been removed from the groups.

Parameters

cellsArray of cells to be ungrouped.  If null is specified then the selection cells are used.

removeCellsAfterUngroup

mxGraph.prototype.removeCellsAfterUngroup = function(cells)

Hook to remove the groups after ungroupCells.

Parameters

cellsArray of mxCells that were ungrouped.

removeCellsFromParent

mxGraph.prototype.removeCellsFromParent = function(cells)

Removes the specified cells from their parents and adds them to the default parent.  Returns the cells that were removed from their parents.

Parameters

cellsArray of mxCells to be removed from their parents.

updateGroupBounds

mxGraph.prototype.updateGroupBounds = function(cells,
border,
moveGroup,
topBorder,
rightBorder,
bottomBorder,
leftBorder)

Updates the bounds of the given groups to include all children and returns the passed-in cells.  Call this with the groups in parent to child order, top-most group first, the cells are processed in reverse order and cells with no children are ignored.

Parameters

cellsThe groups whose bounds should be updated.  If this is null, then the selection cells are used.
borderOptional border to be added in the group.  Default is 0.
moveGroupOptional boolean that allows the group to be moved.  Default is false.
topBorderOptional top border to be added in the group.  Default is 0.
rightBorderOptional top border to be added in the group.  Default is 0.
bottomBorderOptional top border to be added in the group.  Default is 0.
leftBorderOptional top border to be added in the group.  Default is 0.

getBoundingBox

mxGraph.prototype.getBoundingBox = function(cells)

Returns the bounding box for the given array of mxCells.  The bounding box for each cell and its descendants is computed using mxGraphView.getBoundingBox.

Parameters

cellsArray of mxCells whose bounding box should be returned.

Cell cloning, insertion and removal

cloneCell

mxGraph.prototype.cloneCell = function(cell,
allowInvalidEdges,
mapping,
keepPosition)

Returns the clone for the given cell.  Uses cloneCells.

Parameters

cellmxCell to be cloned.
allowInvalidEdgesOptional boolean that specifies if invalid edges should be cloned.  Default is true.
mappingOptional mapping for existing clones.
keepPositionOptional boolean indicating if the position of the cells should be updated to reflect the lost parent cell.  Default is false.

cloneCells

mxGraph.prototype.cloneCells = function(cells,
allowInvalidEdges,
mapping,
keepPosition)

Returns the clones for the given cells.  The clones are created recursively using mxGraphModel.cloneCells.  If the terminal of an edge is not in the given array, then the respective end is assigned a terminal point and the terminal is removed.

Parameters

cellsArray of mxCells to be cloned.
allowInvalidEdgesOptional boolean that specifies if invalid edges should be cloned.  Default is true.
mappingOptional mapping for existing clones.
keepPositionOptional boolean indicating if the position of the cells should be updated to reflect the lost parent cell.  Default is false.

insertVertex

mxGraph.prototype.insertVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)

Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.  The id and style are used for the respective properties of the new mxCell, which is returned.

When adding new vertices from a mouse event, one should take into account the offset of the graph container and the scale and translation of the view in order to find the correct unscaled, untranslated coordinates using mxGraph.getPointForEvent as follows:

var pt = graph.getPointForEvent(evt);
var parent = graph.getDefaultParent();
graph.insertVertex(parent, null,
         'Hello, World!', x, y, 220, 30);

For adding image cells, the style parameter can be assigned as

stylename;image=imageUrl

See mxGraph for more information on using images.

Parameters

parentmxCell that specifies the parent of the new vertex.
idOptional string that defines the Id of the new vertex.
valueObject to be used as the user object.
xInteger that defines the x coordinate of the vertex.
yInteger that defines the y coordinate of the vertex.
widthInteger that defines the width of the vertex.
heightInteger that defines the height of the vertex.
styleOptional string that defines the cell style.
relativeOptional boolean that specifies if the geometry is relative.  Default is false.

createVertex

mxGraph.prototype.createVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)

Hook method that creates the new vertex for insertVertex.

insertEdge

mxGraph.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)

Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.  The id and style are used for the respective properties of the new mxCell, which is returned.

Parameters

parentmxCell that specifies the parent of the new edge.
idOptional string that defines the Id of the new edge.
valueJavaScript object to be used as the user object.
sourcemxCell that defines the source of the edge.
targetmxCell that defines the target of the edge.
styleOptional string that defines the cell style.

createEdge

mxGraph.prototype.createEdge = function(parent,
id,
value,
source,
target,
style)

Hook method that creates the new edge for insertEdge.  This implementation does not set the source and target of the edge, these are set when the edge is added to the model.

addEdge

mxGraph.prototype.addEdge = function(edge,
parent,
source,
target,
index)

Adds the edge to the parent and connects it to the given source and target terminals.  This is a shortcut method.  Returns the edge that was added.

Parameters

edgemxCell to be inserted into the given parent.
parentmxCell that represents the new parent.  If no parent is given then the default parent is used.
sourceOptional mxCell that represents the source terminal.
targetOptional mxCell that represents the target terminal.
indexOptional index to insert the cells at.  Default is to append.

addCell

mxGraph.prototype.addCell = function(cell,
parent,
index,
source,
target)

Adds the cell to the parent and connects it to the given source and target terminals.  This is a shortcut method.  Returns the cell that was added.

Parameters

cellmxCell to be inserted into the given parent.
parentmxCell that represents the new parent.  If no parent is given then the default parent is used.
indexOptional index to insert the cells at.  Default is to append.
sourceOptional mxCell that represents the source terminal.
targetOptional mxCell that represents the target terminal.

addCells

mxGraph.prototype.addCells = function(cells,
parent,
index,
source,
target)

Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.  The change is carried out using cellsAdded.  This method fires mxEvent.ADD_CELLS while the transaction is in progress.  Returns the cells that were added.

Parameters

cellsArray of mxCells to be inserted.
parentmxCell that represents the new parent.  If no parent is given then the default parent is used.
indexOptional index to insert the cells at.  Default is to append.
sourceOptional source mxCell for all inserted cells.
targetOptional target mxCell for all inserted cells.

cellsAdded

mxGraph.prototype.cellsAdded = function(cells,
parent,
index,
source,
target,
absolute,
constrain,
extend)

Adds the specified cells to the given parent.  This method fires mxEvent.CELLS_ADDED while the transaction is in progress.

autoSizeCell

mxGraph.prototype.autoSizeCell = function(cell,
recurse)

Resizes the specified cell to just fit around the its label and/or children

Parameters

cellmxCells to be resized.
recurseOptional boolean which specifies if all descendants should be autosized.  Default is true.

removeCells

mxGraph.prototype.removeCells = function(cells,
includeEdges)

Removes the given cells from the graph including all connected edges if includeEdges is true.  The change is carried out using cellsRemoved.  This method fires mxEvent.REMOVE_CELLS while the transaction is in progress.  The removed cells are returned as an array.

Parameters

cellsArray of mxCells to remove.  If null is specified then the selection cells which are deletable are used.
includeEdgesOptional boolean which specifies if all connected edges should be removed as well.  Default is true.

cellsRemoved

mxGraph.prototype.cellsRemoved = function(cells)

Removes the given cells from the model.  This method fires mxEvent.CELLS_REMOVED while the transaction is in progress.

Parameters

cellsArray of mxCells to remove.

splitEdge

mxGraph.prototype.splitEdge = function(edge,
cells,
newEdge,
dx,
dy)

Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.  This method fires mxEvent.SPLIT_EDGE while the transaction is in progress.  Returns the new edge that was inserted.

Parameters

edgemxCell that represents the edge to be splitted.
cellsmxCells that represents the cells to insert into the edge.
newEdgemxCell that represents the edge to be inserted.
dxOptional integer that specifies the vector to move the cells.
dyOptional integer that specifies the vector to move the cells.

Cell visibility

toggleCells

mxGraph.prototype.toggleCells = function(show,
cells,
includeEdges)

Sets the visible state of the specified cells and all connected edges if includeEdges is true.  The change is carried out using cellsToggled.  This method fires mxEvent.TOGGLE_CELLS while the transaction is in progress.  Returns the cells whose visible state was changed.

Parameters

showBoolean that specifies the visible state to be assigned.
cellsArray of mxCells whose visible state should be changed.  If null is specified then the selection cells are used.
includeEdgesOptional boolean indicating if the visible state of all connected edges should be changed as well.  Default is true.

cellsToggled

mxGraph.prototype.cellsToggled = function(cells,
show)

Sets the visible state of the specified cells.

Parameters

cellsArray of mxCells whose visible state should be changed.
showBoolean that specifies the visible state to be assigned.

Folding

foldCells

mxGraph.prototype.foldCells = function(collapse,
recurse,
cells,
checkFoldable,
evt)

Sets the collapsed state of the specified cells and all descendants if recurse is true.  The change is carried out using cellsFolded.  This method fires mxEvent.FOLD_CELLS while the transaction is in progress.  Returns the cells whose collapsed state was changed.

Parameters

collapsedBoolean indicating the collapsed state to be assigned.
recurseOptional boolean indicating if the collapsed state of all descendants should be set.  Default is false.
cellsArray of mxCells whose collapsed state should be set.  If null is specified then the foldable selection cells are used.
checkFoldableOptional boolean indicating of isCellFoldable should be checked.  Default is false.
evtOptional native event that triggered the invocation.

cellsFolded

mxGraph.prototype.cellsFolded = function(cells,
collapse,
recurse,
checkFoldable)

Sets the collapsed state of the specified cells.  This method fires mxEvent.CELLS_FOLDED while the transaction is in progress.  Returns the cells whose collapsed state was changed.

Parameters

cellsArray of mxCells whose collapsed state should be set.
collapsedBoolean indicating the collapsed state to be assigned.
recurseBoolean indicating if the collapsed state of all descendants should be set.
checkFoldableOptional boolean indicating of isCellFoldable should be checked.  Default is false.

swapBounds

mxGraph.prototype.swapBounds = function(cell,
willCollapse)

Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.

Parameters

cellmxCell for which the bounds should be swapped.
willCollapseBoolean indicating if the cell is going to be collapsed.

updateAlternateBounds

mxGraph.prototype.updateAlternateBounds = function(cell,
geo,
willCollapse)

Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.  If no alternate bounds are defined in the geometry and collapseToPreferredSize is true, then the preferred size is used for the alternate bounds.  The top, left corner is always kept at the same location.

Parameters

cellmxCell for which the geometry is being udpated.
gmxGeometry for which the alternate bounds should be updated.
willCollapseBoolean indicating if the cell is going to be collapsed.

addAllEdges

mxGraph.prototype.addAllEdges = function(cells)

Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.

getAllEdges

mxGraph.prototype.getAllEdges = function(cells)

Returns all edges connected to the given cells or its descendants.

Cell sizing

updateCellSize

mxGraph.prototype.updateCellSize = function(cell,
ignoreChildren)

Updates the size of the given cell in the model using cellSizeUpdated.  This method fires mxEvent.UPDATE_CELL_SIZE while the transaction is in progress.  Returns the cell whose size was updated.

Parameters

cellmxCell whose size should be updated.

cellSizeUpdated

mxGraph.prototype.cellSizeUpdated = function(cell,
ignoreChildren)

Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.

Parameters

cellmxCell for which the size should be changed.

getPreferredSizeForCell

mxGraph.prototype.getPreferredSizeForCell = function(cell)

Returns the preferred width and height of the given mxCell as an mxRectangle.  To implement a minimum width, add a new style eg. minWidth in the vertex and override this method as follows.

var graphGetPreferredSizeForCell = graph.getPreferredSizeForCell;
graph.getPreferredSizeForCell = function(cell)
{
  var result = graphGetPreferredSizeForCell.apply(this, arguments);
  var style = this.getCellStyle(cell);

  if (style['minWidth'] > 0)
  {
    result.width = Math.max(style['minWidth'], result.width);
  }

  return result;
};

Parameters

cellmxCell for which the preferred size should be returned.

resizeCell

mxGraph.prototype.resizeCell = function(cell,
bounds,
recurse)

Sets the bounds of the given cell using resizeCells.  Returns the cell which was passed to the function.

Parameters

cellmxCell whose bounds should be changed.
boundsmxRectangle that represents the new bounds.

resizeCells

mxGraph.prototype.resizeCells = function(cells,
bounds,
recurse)

Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.  Returns the cells which have been passed to the function.

Parameters

cellsArray of mxCells whose bounds should be changed.
boundsArray of mxRectangles that represent the new bounds.

cellsResized

mxGraph.prototype.cellsResized = function(cells,
bounds,
recurse)

Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.  If extendParents is true, then the parent is extended if a child size is changed so that it overlaps with the parent.

The following example shows how to control group resizes to make sure that all child cells stay within the group.

graph.addListener(mxEvent.CELLS_RESIZED, function(sender, evt)
{
  var cells = evt.getProperty('cells');

  if (cells != null)
  {
    for (var i = 0; i < cells.length; i++)
    {
      if (graph.getModel().getChildCount(cells[i]) > 0)
      {
        var geo = graph.getCellGeometry(cells[i]);

        if (geo != null)
        {
          var children = graph.getChildCells(cells[i], true, true);
          var bounds = graph.getBoundingBoxFromGeometry(children, true);

          geo = geo.clone();
          geo.width = Math.max(geo.width, bounds.width);
          geo.height = Math.max(geo.height, bounds.height);

          graph.getModel().setGeometry(cells[i], geo);
        }
      }
    }
  }
});

Parameters

cellsArray of mxCells whose bounds should be changed.
boundsArray of mxRectangles that represent the new bounds.
recurseOptional boolean that specifies if the children should be resized.

cellResized

mxGraph.prototype.cellResized = function(cell,
bounds,
ignoreRelative,
recurse)

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Parameters

cellmxCell whose bounds should be changed.
boundsmxRectangles that represent the new bounds.
ignoreRelativeBoolean that indicates if relative cells should be ignored.
recurseOptional boolean that specifies if the children should be resized.

resizeChildCells

mxGraph.prototype.resizeChildCells = function(cell,
newGeo)

Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.

Parameters

cellmxCell that has been resized.
newGeomxGeometry that represents the new bounds.

constrainChildCells

mxGraph.prototype.constrainChildCells = function(cell)

Constrains the children of the given cell using constrainChild.

Parameters

cellmxCell that has been resized.

scaleCell

mxGraph.prototype.scaleCell = function(cell,
dx,
dy,
recurse)

Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.

Parameters

cellmxCell whose geometry should be scaled.
dxHorizontal scaling factor.
dyVertical scaling factor.
recurseBoolean indicating if the child cells should be scaled.

extendParent

mxGraph.prototype.extendParent = function(cell)

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Parameters

cellmxCell that has been resized.

Cell moving

importCells

mxGraph.prototype.importCells = function(cells,
dx,
dy,
target,
evt,
mapping)

Clones and inserts the given cells into the graph using the move method and returns the inserted cells.  This shortcut is used if cells are inserted via datatransfer.

Parameters

cellsArray of mxCells to be imported.
dxInteger that specifies the x-coordinate of the vector.  Default is 0.
dyInteger that specifies the y-coordinate of the vector.  Default is 0.
targetmxCell that represents the new parent of the cells.
evtMouseevent that triggered the invocation.
mappingOptional mapping for existing clones.

moveCells

mxGraph.prototype.moveCells = function(cells,
dx,
dy,
clone,
target,
evt,
mapping)

Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.  The evt is the mouse event as the mouse was released.  The change is carried out using cellsMoved.  This method fires mxEvent.MOVE_CELLS while the transaction is in progress.  Returns the cells that were moved.

Use the following code to move all cells in the graph.

graph.moveCells(graph.getChildCells(null, true, true), 10, 10);

Parameters

cellsArray of mxCells to be moved, cloned or added to the target.
dxInteger that specifies the x-coordinate of the vector.  Default is 0.
dyInteger that specifies the y-coordinate of the vector.  Default is 0.
cloneBoolean indicating if the cells should be cloned.  Default is false.
targetmxCell that represents the new parent of the cells.
evtMouseevent that triggered the invocation.
mappingOptional mapping for existing clones.

cellsMoved

mxGraph.prototype.cellsMoved = function(cells,
dx,
dy,
disconnect,
constrain,
extend)

Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.  This method fires mxEvent.CELLS_MOVED while the transaction is in progress.

translateCell

mxGraph.prototype.translateCell = function(cell,
dx,
dy)

Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.

getCellContainmentArea

mxGraph.prototype.getCellContainmentArea = function(cell)

Returns the mxRectangle inside which a cell is to be kept.

Parameters

cellmxCell for which the area should be returned.

getMaximumGraphBounds

mxGraph.prototype.getMaximumGraphBounds = function()

Returns the bounds inside which the diagram should be kept as an mxRectangle.

constrainChild

mxGraph.prototype.constrainChild = function(cell,
sizeFirst)

Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.  This modifies the cell’s geometry in-place and does not clone it.

Parameters

cellsmxCell which should be constrained.
sizeFirstSpecifies if the size should be changed first.  Default is true.

resetEdges

mxGraph.prototype.resetEdges = function(cells)

Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.

Parameters

cellsArray of mxCells for which the connected edges should be reset.

resetEdge

mxGraph.prototype.resetEdge = function(edge)

Resets the control points of the given edge.

Parameters

edgemxCell whose points should be reset.

Cell connecting and connection constraints

getOutlineConstraint

mxGraph.prototype.getOutlineConstraint = function(point,
terminalState,
me)

Returns the constraint used to connect to the outline of the given state.

getAllConnectionConstraints

mxGraph.prototype.getAllConnectionConstraints = function(terminal,
source)

Returns an array of all mxConnectionConstraints for the given terminal.  If the shape of the given terminal is a <mxStencilShape> then the constraints of the corresponding mxStencil are returned.

Parameters

terminalmxCellState that represents the terminal.
sourceBoolean that specifies if the terminal is the source or target.

getConnectionConstraint

mxGraph.prototype.getConnectionConstraint = function(edge,
terminal,
source)

Returns an mxConnectionConstraint that describes the given connection point.  This result can then be passed to getConnectionPoint.

Parameters

edgemxCellState that represents the edge.
terminalmxCellState that represents the terminal.
sourceBoolean indicating if the terminal is the source or target.

setConnectionConstraint

mxGraph.prototype.setConnectionConstraint = function(edge,
terminal,
source,
constraint)

Sets the mxConnectionConstraint that describes the given connection point.  If no constraint is given then nothing is changed.  To remove an existing constraint from the given edge, use an empty constraint instead.

Parameters

edgemxCell that represents the edge.
terminalmxCell that represents the terminal.
sourceBoolean indicating if the terminal is the source or target.
constraintOptional mxConnectionConstraint to be used for this connection.

getConnectionPoint

mxGraph.prototype.getConnectionPoint = function(vertex,
constraint,
round)

Returns the nearest point in the list of absolute points or the center of the opposite terminal.

Parameters

vertexmxCellState that represents the vertex.
constraintmxConnectionConstraint that represents the connection point constraint as returned by getConnectionConstraint.

connectCell

mxGraph.prototype.connectCell = function(edge,
terminal,
source,
constraint)

Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.  Returns the updated edge.

Parameters

edgemxCell whose terminal should be updated.
terminalmxCell that represents the new terminal to be used.
sourceBoolean indicating if the new terminal is the source or target.
constraintOptional mxConnectionConstraint to be used for this connection.

cellConnected

mxGraph.prototype.cellConnected = function(edge,
terminal,
source,
constraint)

Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.  This method fires mxEvent.CELL_CONNECTED while the transaction is in progress.

Parameters

edgemxCell whose terminal should be updated.
terminalmxCell that represents the new terminal to be used.
sourceBoolean indicating if the new terminal is the source or target.
constraintmxConnectionConstraint to be used for this connection.

disconnectGraph

mxGraph.prototype.disconnectGraph = function(cells)

Disconnects the given edges from the terminals which are not in the given array.

Parameters

cellsArray of mxCells to be disconnected.

Drilldown

getCurrentRoot

mxGraph.prototype.getCurrentRoot = function()

Returns the current root of the displayed cell hierarchy.  This is a shortcut to mxGraphView.currentRoot in view.

getTranslateForRoot

mxGraph.prototype.getTranslateForRoot = function(cell)

Returns the translation to be used if the given cell is the root cell as an mxPoint.  This implementation returns null.

Example

To keep the children at their absolute position while stepping into groups, this function can be overridden as follows.

var offset = new mxPoint(0, 0);

while (cell != null)
{
  var geo = this.model.getGeometry(cell);

  if (geo != null)
  {
    offset.x -= geo.x;
    offset.y -= geo.y;
  }

  cell = this.model.getParent(cell);
}

return offset;

Parameters

cellmxCell that represents the root.

isPort

mxGraph.prototype.isPort = function(cell)

Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.  Note that a port should not be movable.  This implementation always returns false.

A typical implementation is the following

graph.isPort = function(cell)
{
  var geo = this.getCellGeometry(cell);

  return (geo != null) ? geo.relative : false;
};

Parameters

cellmxCell that represents the port.

getTerminalForPort

mxGraph.prototype.getTerminalForPort = function(cell,
source)

Returns the terminal to be used for a given port.  This implementation always returns the parent cell.

Parameters

cellmxCell that represents the port.
sourceIf the cell is the source or target port.

getChildOffsetForCell

mxGraph.prototype.getChildOffsetForCell = function(cell)

Returns the offset to be used for the cells inside the given cell.  The root and layer cells may be identified using mxGraphModel.isRoot and mxGraphModel.isLayer.  For all other current roots, the mxGraphView.currentRoot field points to the respective cell, so that the following holds: cell == this.view.currentRoot.  This implementation returns null.

Parameters

cellmxCell whose offset should be returned.

enterGroup

mxGraph.prototype.enterGroup = function(cell)

Uses the given cell as the root of the displayed cell hierarchy.  If no cell is specified then the selection cell is used.  The cell is only used if isValidRoot returns true.

Parameters

cellOptional mxCell to be used as the new root.  Default is the selection cell.

exitGroup

mxGraph.prototype.exitGroup = function()

Changes the current root to the next valid root in the displayed cell hierarchy.

home

mxGraph.prototype.home = function()

Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.

isValidRoot

mxGraph.prototype.isValidRoot = function(cell)

Returns true if the given cell is a valid root for the cell display hierarchy.  This implementation returns true for all non-null values.

Parameters

cellmxCell which should be checked as a possible root.

Graph display

getGraphBounds

mxGraph.prototype.getGraphBounds = function()

Returns the bounds of the visible graph.  Shortcut to mxGraphView.getGraphBounds.  See also: getBoundingBoxFromGeometry.

getCellBounds

mxGraph.prototype.getCellBounds = function(cell,
includeEdges,
includeDescendants)

Returns the scaled, translated bounds for the given cell.  See mxGraphView.getBounds for arrays.

Parameters

cellmxCell whose bounds should be returned.
includeEdgeOptional boolean that specifies if the bounds of the connected edges should be included.  Default is false.
includeDescendantsOptional boolean that specifies if the bounds of all descendants should be included.  Default is false.

getBoundingBoxFromGeometry

mxGraph.prototype.getBoundingBoxFromGeometry = function(cells,
includeEdges)

Returns the bounding box for the geometries of the vertices in the given array of cells.  This can be used to find the graph bounds during a layout operation (ie. before the last endUpdate) as follows:

var cells = graph.getChildCells(graph.getDefaultParent(), true, true);
var bounds = graph.getBoundingBoxFromGeometry(cells, true);

This can then be used to move cells to the origin

if (bounds.x < 0 || bounds.y < 0)
{
  graph.moveCells(cells, -Math.min(bounds.x, 0), -Math.min(bounds.y, 0))
}

Or to translate the graph view

if (bounds.x < 0 || bounds.y < 0)
{
  graph.view.setTranslate(-Math.min(bounds.x, 0), -Math.min(bounds.y, 0));
}

Parameters

cellsArray of mxCells whose bounds should be returned.
includeEdgesSpecifies if edge bounds should be included by computing the bounding box for all points in geometry.  Default is false.

refresh

mxGraph.prototype.refresh = function(cell)

Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph.  This fires a refresh event as the last step.

Parameters

cellOptional mxCell for which the cell states should be cleared.

snap

mxGraph.prototype.snap = function(value)

Snaps the given numeric value to the grid if gridEnabled is true.

Parameters

valueNumeric value to be snapped to the grid.

panGraph

mxGraph.prototype.panGraph = function(dx,
dy)

Shifts the graph display by the given amount.  This is used to preview panning operations, use mxGraphView.setTranslate to set a persistent translation of the view.  Fires mxEvent.PAN.

Parameters

dxAmount to shift the graph along the x-axis.
dyAmount to shift the graph along the y-axis.

zoomIn

mxGraph.prototype.zoomIn = function()

Zooms into the graph by zoomFactor.

zoomOut

mxGraph.prototype.zoomOut = function()

Zooms out of the graph by zoomFactor.

zoomActual

mxGraph.prototype.zoomActual = function()

Resets the zoom and panning in the view.

zoomTo

mxGraph.prototype.zoomTo = function(scale,
center)

Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.

center

mxGraph.prototype.center = function(horizontal,
vertical,
cx,
cy)

Centers the graph in the container.

Parameters

horizontalOptional boolean that specifies if the graph should be centered horizontally.  Default is true.
verticalOptional boolean that specifies if the graph should be centered vertically.  Default is true.
cxOptional float that specifies the horizontal center.  Default is 0.5.
cyOptional float that specifies the vertical center.  Default is 0.5.

zoom

mxGraph.prototype.zoom = function(factor,
center)

Zooms the graph using the given factor.  Center is an optional boolean argument that keeps the graph scrolled to the center.  If the center argument is omitted, then centerZoom will be used as its value.

zoomToRect

mxGraph.prototype.zoomToRect = function(rect)

Zooms the graph to the specified rectangle.  If the rectangle does not have same aspect ratio as the display container, it is increased in the smaller relative dimension only until the aspect match.  The original rectangle is centralised within this expanded one.

Note that the input rectangular must be un-scaled and un-translated.

Parameters

rectThe un-scaled and un-translated rectangluar region that should be just visible after the operation

scrollCellToVisible

mxGraph.prototype.scrollCellToVisible = function(cell,
center)

Pans the graph so that it shows the given cell.  Optionally the cell may be centered in the container.

To center a given graph if the <container> has no scrollbars, use the following code.

[code] var bounds = graph.getGraphBounds(); graph.view.setTranslate(-bounds.x - (bounds.width - container.clientWidth) / 2, -bounds.y - (bounds.height - container.clientHeight) / 2); [/code]

Parameters

cellmxCell to be made visible.
centerOptional boolean flag.  Default is false.

scrollRectToVisible

mxGraph.prototype.scrollRectToVisible = function(rect)

Pans the graph so that it shows the given rectangle.

Parameters

rectmxRectangle to be made visible.

getCellGeometry

mxGraph.prototype.getCellGeometry = function(cell)

Returns the mxGeometry for the given cell.  This implementation uses mxGraphModel.getGeometry.  Subclasses can override this to implement specific geometries for cells in only one graph, that is, it can return geometries that depend on the current state of the view.

Parameters

cellmxCell whose geometry should be returned.

isCellVisible

mxGraph.prototype.isCellVisible = function(cell)

Returns true if the given cell is visible in this graph.  This implementation uses mxGraphModel.isVisible.  Subclassers can override this to implement specific visibility for cells in only one graph, that is, without affecting the visible state of the cell.

When using dynamic filter expressions for cell visibility, then the graph should be revalidated after the filter expression has changed.

Parameters

cellmxCell whose visible state should be returned.

isCellCollapsed

mxGraph.prototype.isCellCollapsed = function(cell)

Returns true if the given cell is collapsed in this graph.  This implementation uses mxGraphModel.isCollapsed.  Subclassers can override this to implement specific collapsed states for cells in only one graph, that is, without affecting the collapsed state of the cell.

When using dynamic filter expressions for the collapsed state, then the graph should be revalidated after the filter expression has changed.

Parameters

cellmxCell whose collapsed state should be returned.

isCellConnectable

mxGraph.prototype.isCellConnectable = function(cell)

Returns true if the given cell is connectable in this graph.  This implementation uses mxGraphModel.isConnectable.  Subclassers can override this to implement specific connectable states for cells in only one graph, that is, without affecting the connectable state of the cell in the model.

Parameters

cellmxCell whose connectable state should be returned.

isOrthogonal

mxGraph.prototype.isOrthogonal = function(edge)

Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.

Parameters

edgemxCellState that represents the edge.

isLoop

mxGraph.prototype.isLoop = function(state)

Returns true if the given cell state is a loop.

Parameters

statemxCellState that represents a potential loop.

isCloneEvent

mxGraph.prototype.isCloneEvent = function(evt)

Returns true if the given event is a clone event.  This implementation returns true if control is pressed.

isTransparentClickEvent

mxGraph.prototype.isTransparentClickEvent = function(evt)

Hook for implementing click-through behaviour on selected cells.  If this returns true the cell behind the selected cell will be selected.  This implementation returns false;

isToggleEvent

mxGraph.prototype.isToggleEvent = function(evt)

Returns true if the given event is a toggle event.  This implementation returns true if the meta key (Cmd) is pressed on Macs or if control is pressed on any other platform.

isGridEnabledEvent

mxGraph.prototype.isGridEnabledEvent = function(evt)

Returns true if the given mouse event should be aligned to the grid.

isConstrainedEvent

mxGraph.prototype.isConstrainedEvent = function(evt)

Returns true if the given mouse event should be aligned to the grid.

isIgnoreTerminalEvent

mxGraph.prototype.isIgnoreTerminalEvent = function(evt)

Returns true if the given mouse event should not allow any connections to be made.  This implementation returns false.

Validation

validationAlert

mxGraph.prototype.validationAlert = function(message)

Displays the given validation error in a dialog.  This implementation uses mxUtils.alert.

isEdgeValid

mxGraph.prototype.isEdgeValid = function(edge,
source,
target)

Checks if the return value of getEdgeValidationError for the given arguments is null.

Parameters

edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

getEdgeValidationError

mxGraph.prototype.getEdgeValidationError = function(edge,
source,
target)

Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.  A return value of null means the edge is valid, a return value of ‘’ means it’s not valid, but do not display an error message.  Any other (non-empty) string returned from this method is displayed as an error message when trying to connect an edge to a source and target.  This implementation uses the multiplicities, and checks multigraph, allowDanglingEdges and allowLoops to generate validation errors.

For extending this method with specific checks for source/target cells, the method can be extended as follows.  Returning an empty string means the edge is invalid with no error message, a non-null string specifies the error message, and null means the edge is valid.

graph.getEdgeValidationError = function(edge, source, target)
{
  if (source != null && target != null &&
    this.model.getValue(source) != null &&
    this.model.getValue(target) != null)
  {
    if (target is not valid for source)
    {
      return 'Invalid Target';
    }
  }

  // "Supercall"
  return mxGraph.prototype.getEdgeValidationError.apply(this, arguments);
}

Parameters

edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

validateEdge

mxGraph.prototype.validateEdge = function(edge,
source,
target)

Hook method for subclassers to return an error message for the given edge and terminals.  This implementation returns null.

Parameters

edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

validateGraph

mxGraph.prototype.validateGraph = function(cell,
context)

Validates the graph by validating each descendant of the given cell or the root of the model.  Context is an object that contains the validation state for the complete validation run.  The validation errors are attached to their cells using setCellWarning.  Returns null in the case of successful validation or an array of strings (warnings) in the case of failed validations.

Paramters

cellOptional mxCell to start the validation recursion.  Default is the graph root.
contextObject that represents the global validation state.

getCellValidationError

mxGraph.prototype.getCellValidationError = function(cell)

Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.

Parameters

cellmxCell for which the multiplicities should be checked.

validateCell

mxGraph.prototype.validateCell = function(cell,
context)

Hook method for subclassers to return an error message for the given cell and validation context.  This implementation returns null.  Any HTML breaks will be converted to linefeeds in the calling method.

Parameters

cellmxCell that represents the cell to validate.
contextObject that represents the global validation state.

Graph appearance

getBackgroundImage

mxGraph.prototype.getBackgroundImage = function()

Returns the backgroundImage as an mxImage.

setBackgroundImage

mxGraph.prototype.setBackgroundImage = function(image)

Sets the new backgroundImage.

Parameters

imageNew mxImage to be used for the background.

getFoldingImage

mxGraph.prototype.getFoldingImage = function(state)

Returns the mxImage used to display the collapsed state of the specified cell state.  This returns null for all edges.

convertValueToString

mxGraph.prototype.convertValueToString = function(cell)

Returns the textual representation for the given cell.  This implementation returns the nodename or string-representation of the user object.

Example

The following returns the label attribute from the cells user object if it is an XML node.

graph.convertValueToString = function(cell)
{
 return cell.getAttribute('label');
}

See also: cellLabelChanged.

Parameters

cellmxCell whose textual representation should be returned.

getLabel

mxGraph.prototype.getLabel = function(cell)

Returns a string or DOM node that represents the label for the given cell.  This implementation uses convertValueToString if labelsVisible is true.  Otherwise it returns an empty string.

To truncate a label to match the size of the cell, the following code can be used.

graph.getLabel = function(cell)
{
  var label = mxGraph.prototype.getLabel.apply(this, arguments);

  if (label != null && this.model.isVertex(cell))
  {
    var geo = this.getCellGeometry(cell);

    if (geo != null)
    {
      var max = parseInt(geo.width / 8);

      if (label.length > max)
      {
        label = label.substring(0, max)+'...';
      }
    }
  }
  return mxUtils.htmlEntities(label);
}

A resize listener is needed in the graph to force a repaint of the label after a resize.

graph.addListener(mxEvent.RESIZE_CELLS, function(sender, evt)
{
  var cells = evt.getProperty('cells');

  for (var i = 0; i < cells.length; i++)
  {
    this.view.removeState(cells[i]);
  }
});

Parameters

cellmxCell whose label should be returned.

isHtmlLabel

mxGraph.prototype.isHtmlLabel = function(cell)

Returns true if the label must be rendered as HTML markup.  The default implementation returns htmlLabels.

Parameters

cellmxCell whose label should be displayed as HTML markup.

isHtmlLabels

mxGraph.prototype.isHtmlLabels = function()

Returns htmlLabels.

setHtmlLabels

mxGraph.prototype.setHtmlLabels = function(value)

Sets htmlLabels.

isWrapping

mxGraph.prototype.isWrapping = function(cell)

This enables wrapping for HTML labels.

Returns true if no white-space CSS style directive should be used for displaying the given cells label.  This implementation returns true if mxConstants.STYLE_WHITE_SPACE in the style of the given cell is ‘wrap’.

This is used as a workaround for IE ignoring the white-space directive of child elements if the directive appears in a parent element.  It should be overridden to return true if a white-space directive is used in the HTML markup that represents the given cells label.  In order for HTML markup to work in labels, isHtmlLabel must also return true for the given cell.

Example

graph.getLabel = function(cell)
{
  var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"

  if (this.model.isEdge(cell))
  {
    tmp = '<div style="width: 150px; white-space:normal;">'+tmp+'</div>';
  }

  return tmp;
}

graph.isWrapping = function(state)
{
  return this.model.isEdge(state.cell);
}

Makes sure no edge label is wider than 150 pixels, otherwise the content is wrapped.  Note: No width must be specified for wrapped vertex labels as the vertex defines the width in its geometry.

Parameters

statemxCell whose label should be wrapped.

isLabelClipped

mxGraph.prototype.isLabelClipped = function(cell)

Returns true if the overflow portion of labels should be hidden.  If this returns true then vertex labels will be clipped to the size of the vertices.  This implementation returns true if mxConstants.STYLE_OVERFLOW in the style of the given cell is ‘hidden’.

Parameters

statemxCell whose label should be clipped.

getTooltip

mxGraph.prototype.getTooltip = function(state,
node,
x,
y)

Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.  This implementation checks if the given node is a folding icon or overlay and returns the respective tooltip.  If this does not result in a tooltip, the handler for the cell is retrieved from <selectionCellsHandler> and the optional getTooltipForNode method is called.  If no special tooltip exists here then getTooltipForCell is used with the cell in the given state as the argument to return a tooltip for the given state.

Parameters

statemxCellState whose tooltip should be returned.
nodeDOM node that is currently under the mouse.
xX-coordinate of the mouse.
yY-coordinate of the mouse.

getTooltipForCell

mxGraph.prototype.getTooltipForCell = function(cell)

Returns the string or DOM node to be used as the tooltip for the given cell.  This implementation uses the cells getTooltip function if it exists, or else it returns convertValueToString for the cell.

Example

graph.getTooltipForCell = function(cell)
{
  return 'Hello, World!';
}

Replaces all tooltips with the string Hello, World!

Parameters

cellmxCell whose tooltip should be returned.

getLinkForCell

mxGraph.prototype.getLinkForCell = function(cell)

Returns the string to be used as the link for the given cell.  This implementation returns null.

Parameters

cellmxCell whose tooltip should be returned.

getCursorForMouseEvent

mxGraph.prototype.getCursorForMouseEvent = function(me)

Returns the cursor value to be used for the CSS of the shape for the given event.  This implementation calls getCursorForCell.

Parameters

memxMouseEvent whose cursor should be returned.

getCursorForCell

mxGraph.prototype.getCursorForCell = function(cell)

Returns the cursor value to be used for the CSS of the shape for the given cell.  This implementation returns null.

Parameters

cellmxCell whose cursor should be returned.

getStartSize

mxGraph.prototype.getStartSize = function(swimlane)

Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.  The return value is an mxRectangle with either width or height set as appropriate.

Parameters

swimlanemxCell whose start size should be returned.

getImage

mxGraph.prototype.getImage = function(state)

Returns the image URL for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_IMAGE in the cell style.

Parameters

statemxCellState whose image URL should be returned.

getVerticalAlign

mxGraph.prototype.getVerticalAlign = function(state)

Returns the vertical alignment for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_VERTICAL_ALIGN in the cell style.

Parameters

statemxCellState whose vertical alignment should be returned.

getIndicatorColor

mxGraph.prototype.getIndicatorColor = function(state)

Returns the indicator color for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_COLOR in the cell style.

Parameters

statemxCellState whose indicator color should be returned.

getIndicatorGradientColor

mxGraph.prototype.getIndicatorGradientColor = function(state)

Returns the indicator gradient color for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_GRADIENTCOLOR in the cell style.

Parameters

statemxCellState whose indicator gradient color should be returned.

getIndicatorShape

mxGraph.prototype.getIndicatorShape = function(state)

Returns the indicator shape for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_SHAPE in the cell style.

Parameters

statemxCellState whose indicator shape should be returned.

getIndicatorImage

mxGraph.prototype.getIndicatorImage = function(state)

Returns the indicator image for the given cell state.  This implementation returns the value stored under mxConstants.STYLE_INDICATOR_IMAGE in the cell style.

Parameters

statemxCellState whose indicator image should be returned.

getBorder

mxGraph.prototype.getBorder = function()

Returns the value of border.

setBorder

mxGraph.prototype.setBorder = function(value)

Sets the value of border.

Parameters

valuePositive integer that represents the border to be used.

isSwimlane

mxGraph.prototype.isSwimlane = function (cell)

Returns true if the given cell is a swimlane in the graph.  A swimlane is a container cell with some specific behaviour.  This implementation checks if the shape associated with the given cell is a mxSwimlane.

Parameters

cellmxCell to be checked.

Graph behaviour

isResizeContainer

mxGraph.prototype.isResizeContainer = function()

Returns resizeContainer.

setResizeContainer

mxGraph.prototype.setResizeContainer = function(value)

Sets resizeContainer.

Parameters

valueBoolean indicating if the container should be resized.

isEnabled

mxGraph.prototype.isEnabled = function()

Returns true if the graph is enabled.

setEnabled

mxGraph.prototype.setEnabled = function(value)

Specifies if the graph should allow any interactions.  This implementation updates enabled.

Parameters

valueBoolean indicating if the graph should be enabled.

isEscapeEnabled

mxGraph.prototype.isEscapeEnabled = function()

Returns escapeEnabled.

setEscapeEnabled

mxGraph.prototype.setEscapeEnabled = function(value)

Sets escapeEnabled.

Parameters

enabledBoolean indicating if escape should be enabled.

isInvokesStopCellEditing

mxGraph.prototype.isInvokesStopCellEditing = function()

Returns invokesStopCellEditing.

setInvokesStopCellEditing

mxGraph.prototype.setInvokesStopCellEditing = function(value)

Sets invokesStopCellEditing.

isEnterStopsCellEditing

mxGraph.prototype.isEnterStopsCellEditing = function()

Returns enterStopsCellEditing.

setEnterStopsCellEditing

mxGraph.prototype.setEnterStopsCellEditing = function(value)

Sets enterStopsCellEditing.

isCellLocked

mxGraph.prototype.isCellLocked = function(cell)

Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.  This implementation returns true for all vertices with a relative geometry if <locked> is false.

Parameters

cellmxCell whose locked state should be returned.

isCellsLocked

mxGraph.prototype.isCellsLocked = function()

Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.  This implementation returns true for all vertices with a relative geometry if <locked> is false.

Parameters

cellmxCell whose locked state should be returned.

setCellsLocked

mxGraph.prototype.setCellsLocked = function(value)

Sets if any cell may be moved, sized, bended, disconnected, edited or selected.

Parameters

valueBoolean that defines the new value for cellsLocked.

getCloneableCells

mxGraph.prototype.getCloneableCells = function(cells)

Returns the cells which may be exported in the given array of cells.

isCellCloneable

mxGraph.prototype.isCellCloneable = function(cell)

Returns true if the given cell is cloneable.  This implementation returns isCellsCloneable for all cells unless a cell style specifies mxConstants.STYLE_CLONEABLE to be 0.

Parameters

cellOptional mxCell whose cloneable state should be returned.

isCellsCloneable

mxGraph.prototype.isCellsCloneable = function()

Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.

setCellsCloneable

mxGraph.prototype.setCellsCloneable = function(value)

Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.  This implementation updates cellsCloneable.

Parameters

valueBoolean indicating if the graph should be cloneable.

getExportableCells

mxGraph.prototype.getExportableCells = function(cells)

Returns the cells which may be exported in the given array of cells.

canExportCell

mxGraph.prototype.canExportCell = function(cell)

Returns true if the given cell may be exported to the clipboard.  This implementation returns exportEnabled for all cells.

Parameters

cellmxCell that represents the cell to be exported.

getImportableCells

mxGraph.prototype.getImportableCells = function(cells)

Returns the cells which may be imported in the given array of cells.

canImportCell

mxGraph.prototype.canImportCell = function(cell)

Returns true if the given cell may be imported from the clipboard.  This implementation returns importEnabled for all cells.

Parameters

cellmxCell that represents the cell to be imported.

isCellSelectable

mxGraph.prototype.isCellSelectable = function(cell)

Returns true if the given cell is selectable.  This implementation returns cellsSelectable.

To add a new style for making cells (un)selectable, use the following code.

mxGraph.prototype.isCellSelectable = function(cell)
{
  var state = this.view.getState(cell);
  var style = (state != null) ? state.style : this.getCellStyle(cell);

  return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
};

You can then use the new style as shown in this example.

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');

Parameters

cellmxCell whose selectable state should be returned.

isCellsSelectable

mxGraph.prototype.isCellsSelectable = function()

Returns cellsSelectable.

setCellsSelectable

mxGraph.prototype.setCellsSelectable = function(value)

Sets cellsSelectable.

getDeletableCells

mxGraph.prototype.getDeletableCells = function(cells)

Returns the cells which may be exported in the given array of cells.

isCellDeletable

mxGraph.prototype.isCellDeletable = function(cell)

Returns true if the given cell is moveable.  This returns cellsDeletable for all given cells if a cells style does not specify mxConstants.STYLE_DELETABLE to be 0.

Parameters

cellmxCell whose deletable state should be returned.

isCellsDeletable

mxGraph.prototype.isCellsDeletable = function()

Returns cellsDeletable.

setCellsDeletable

mxGraph.prototype.setCellsDeletable = function(value)

Sets cellsDeletable.

Parameters

valueBoolean indicating if the graph should allow deletion of cells.

isLabelMovable

mxGraph.prototype.isLabelMovable = function(cell)

Returns true if the given edges’s label is moveable.  This returns <movable> for all given cells if <isLocked> does not return true for the given cell.

Parameters

cellmxCell whose label should be moved.

isCellRotatable

mxGraph.prototype.isCellRotatable = function(cell)

Returns true if the given cell is rotatable.  This returns true for the given cell if its style does not specify mxConstants.STYLE_ROTATABLE to be 0.

Parameters

cellmxCell whose rotatable state should be returned.

getMovableCells

mxGraph.prototype.getMovableCells = function(cells)

Returns the cells which are movable in the given array of cells.

isCellMovable

mxGraph.prototype.isCellMovable = function(cell)

Returns true if the given cell is moveable.  This returns cellsMovable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_MOVABLE to be 0.

Parameters

cellmxCell whose movable state should be returned.

isCellsMovable

mxGraph.prototype.isCellsMovable = function()

Returns cellsMovable.

setCellsMovable

mxGraph.prototype.setCellsMovable = function(value)

Specifies if the graph should allow moving of cells.  This implementation updates <cellsMsovable>.

Parameters

valueBoolean indicating if the graph should allow moving of cells.

isGridEnabled

mxGraph.prototype.isGridEnabled = function()

Returns gridEnabled as a boolean.

setGridEnabled

mxGraph.prototype.setGridEnabled = function(value)

Specifies if the grid should be enabled.

Parameters

valueBoolean indicating if the grid should be enabled.

isPortsEnabled

mxGraph.prototype.isPortsEnabled = function()

Returns portsEnabled as a boolean.

setPortsEnabled

mxGraph.prototype.setPortsEnabled = function(value)

Specifies if the ports should be enabled.

Parameters

valueBoolean indicating if the ports should be enabled.

getGridSize

mxGraph.prototype.getGridSize = function()

Returns gridSize.

setGridSize

mxGraph.prototype.setGridSize = function(value)

Sets gridSize.

getTolerance

mxGraph.prototype.getTolerance = function()

Returns tolerance.

setTolerance

mxGraph.prototype.setTolerance = function(value)

Sets tolerance.

isVertexLabelsMovable

mxGraph.prototype.isVertexLabelsMovable = function()

Returns vertexLabelsMovable.

setVertexLabelsMovable

mxGraph.prototype.setVertexLabelsMovable = function(value)

Sets vertexLabelsMovable.

isEdgeLabelsMovable

mxGraph.prototype.isEdgeLabelsMovable = function()

Returns edgeLabelsMovable.

isEdgeLabelsMovable

isSwimlaneNesting

mxGraph.prototype.isSwimlaneNesting = function()

Returns swimlaneNesting as a boolean.

setSwimlaneNesting

mxGraph.prototype.setSwimlaneNesting = function(value)

Specifies if swimlanes can be nested by drag and drop.  This is only taken into account if dropEnabled is true.

Parameters

valueBoolean indicating if swimlanes can be nested.

isSwimlaneSelectionEnabled

mxGraph.prototype.isSwimlaneSelectionEnabled = function()

Returns swimlaneSelectionEnabled as a boolean.

setSwimlaneSelectionEnabled

mxGraph.prototype.setSwimlaneSelectionEnabled = function(value)

Specifies if swimlanes should be selected if the mouse is released over their content area.

Parameters

valueBoolean indicating if swimlanes content areas should be selected when the mouse is released over them.

isMultigraph

mxGraph.prototype.isMultigraph = function()

Returns multigraph as a boolean.

setMultigraph

mxGraph.prototype.setMultigraph = function(value)

Specifies if the graph should allow multiple connections between the same pair of vertices.

Parameters

valueBoolean indicating if the graph allows multiple connections between the same pair of vertices.

isAllowLoops

mxGraph.prototype.isAllowLoops = function()

Returns allowLoops as a boolean.

setAllowDanglingEdges

mxGraph.prototype.setAllowDanglingEdges = function(value)

Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.

Parameters

valueBoolean indicating if dangling edges are allowed.

isAllowDanglingEdges

mxGraph.prototype.isAllowDanglingEdges = function()

Returns allowDanglingEdges as a boolean.

setConnectableEdges

mxGraph.prototype.setConnectableEdges = function(value)

Specifies if edges should be connectable.

Parameters

valueBoolean indicating if edges should be connectable.

isConnectableEdges

mxGraph.prototype.isConnectableEdges = function()

Returns connectableEdges as a boolean.

setCloneInvalidEdges

mxGraph.prototype.setCloneInvalidEdges = function(value)

Specifies if edges should be inserted when cloned but not valid wrt.  getEdgeValidationError.  If false such edges will be silently ignored.

Parameters

valueBoolean indicating if cloned invalid edges should be inserted into the graph or ignored.

isCloneInvalidEdges

mxGraph.prototype.isCloneInvalidEdges = function()

Returns cloneInvalidEdges as a boolean.

setAllowLoops

mxGraph.prototype.setAllowLoops = function(value)

Specifies if loops are allowed.

Parameters

valueBoolean indicating if loops are allowed.

isDisconnectOnMove

mxGraph.prototype.isDisconnectOnMove = function()

Returns disconnectOnMove as a boolean.

setDisconnectOnMove

mxGraph.prototype.setDisconnectOnMove = function(value)

Specifies if edges should be disconnected when moved.  (Note: Cloned edges are always disconnected.)

Parameters

valueBoolean indicating if edges should be disconnected when moved.

isDropEnabled

mxGraph.prototype.isDropEnabled = function()

Returns dropEnabled as a boolean.

setDropEnabled

mxGraph.prototype.setDropEnabled = function(value)

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabledBoolean indicating if the graph should allow dropping of cells into other cells.

isSplitEnabled

mxGraph.prototype.isSplitEnabled = function()

Returns splitEnabled as a boolean.

setSplitEnabled

mxGraph.prototype.setSplitEnabled = function(value)

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabledBoolean indicating if the graph should allow dropping of cells into other cells.

isCellResizable

mxGraph.prototype.isCellResizable = function(cell)

Returns true if the given cell is resizable.  This returns cellsResizable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_RESIZABLE to be 0.

Parameters

cellmxCell whose resizable state should be returned.

isCellsResizable

mxGraph.prototype.isCellsResizable = function()

Returns cellsResizable.

setCellsResizable

mxGraph.prototype.setCellsResizable = function(value)

Specifies if the graph should allow resizing of cells.  This implementation updates cellsResizable.

Parameters

valueBoolean indicating if the graph should allow resizing of cells.

isTerminalPointMovable

mxGraph.prototype.isTerminalPointMovable = function(cell,
source)

Returns true if the given terminal point is movable.  This is independent from isCellConnectable and isCellDisconnectable and controls if terminal points can be moved in the graph if the edge is not connected.  Note that it is required for this to return true to connect unconnected edges.  This implementation returns true.

Parameters

cellmxCell whose terminal point should be moved.
sourceBoolean indicating if the source or target terminal should be moved.

isCellBendable

mxGraph.prototype.isCellBendable = function(cell)

Returns true if the given cell is bendable.  This returns cellsBendable for all given cells if <isLocked> does not return true for the given cell and its style does not specify mxConstants.STYLE_BENDABLE to be 0.

Parameters

cellmxCell whose bendable state should be returned.

isCellsBendable

mxGraph.prototype.isCellsBendable = function()

Returns <cellsBenadable>.

setCellsBendable

mxGraph.prototype.setCellsBendable = function(value)

Specifies if the graph should allow bending of edges.  This implementation updates <bendable>.

Parameters

valueBoolean indicating if the graph should allow bending of edges.

isCellEditable

mxGraph.prototype.isCellEditable = function(cell)

Returns true if the given cell is editable.  This returns cellsEditable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_EDITABLE to be 0.

Parameters

cellmxCell whose editable state should be returned.

isCellsEditable

mxGraph.prototype.isCellsEditable = function()

Returns cellsEditable.

setCellsEditable

mxGraph.prototype.setCellsEditable = function(value)

Specifies if the graph should allow in-place editing for cell labels.  This implementation updates cellsEditable.

Parameters

valueBoolean indicating if the graph should allow in-place editing.

isCellDisconnectable

mxGraph.prototype.isCellDisconnectable = function(cell,
terminal,
source)

Returns true if the given cell is disconnectable from the source or target terminal.  This returns isCellsDisconnectable for all given cells if isCellLocked does not return true for the given cell.

Parameters

cellmxCell whose disconnectable state should be returned.
terminalmxCell that represents the source or target terminal.
sourceBoolean indicating if the source or target terminal is to be disconnected.

isCellsDisconnectable

mxGraph.prototype.isCellsDisconnectable = function()

Returns cellsDisconnectable.

setCellsDisconnectable

mxGraph.prototype.setCellsDisconnectable = function(value)

Sets cellsDisconnectable.

isValidSource

mxGraph.prototype.isValidSource = function(cell)

Returns true if the given cell is a valid source for new connections.  This implementation returns true for all non-null values and is called by is called by isValidConnection.

Parameters

cellmxCell that represents a possible source or null.

isValidTarget

mxGraph.prototype.isValidTarget = function(cell)

Returns isValidSource for the given cell.  This is called by isValidConnection.

Parameters

cellmxCell that represents a possible target or null.

isValidConnection

mxGraph.prototype.isValidConnection = function(source,
target)

Returns true if the given target cell is a valid target for source.  This is a boolean implementation for not allowing connections between certain pairs of vertices and is called by getEdgeValidationError.  This implementation returns true if isValidSource returns true for the source and isValidTarget returns true for the target.

Parameters

sourcemxCell that represents the source cell.
targetmxCell that represents the target cell.

setConnectable

mxGraph.prototype.setConnectable = function(connectable)

Specifies if the graph should allow new connections.  This implementation updates mxConnectionHandler.enabled in <connectionHandler>.

Parameters

connectableBoolean indicating if new connections should be allowed.

isConnectable

mxGraph.prototype.isConnectable = function()

Returns true if the <connectionHandler> is enabled.

setTooltips

mxGraph.prototype.setTooltips = function (enabled)

Specifies if tooltips should be enabled.  This implementation updates mxTooltipHandler.enabled in <tooltipHandler>.

Parameters

enabledBoolean indicating if tooltips should be enabled.

setPanning

mxGraph.prototype.setPanning = function(enabled)

Specifies if panning should be enabled.  This implementation updates mxPanningHandler.panningEnabled in <panningHandler>.

Parameters

enabledBoolean indicating if panning should be enabled.

isEditing

mxGraph.prototype.isEditing = function(cell)

Returns true if the given cell is currently being edited.  If no cell is specified then this returns true if any cell is currently being edited.

Parameters

cellmxCell that should be checked.

isAutoSizeCell

mxGraph.prototype.isAutoSizeCell = function(cell)

Returns true if the size of the given cell should automatically be updated after a change of the label.  This implementation returns autoSizeCells or checks if the cell style does specify mxConstants.STYLE_AUTOSIZE to be 1.

Parameters

cellmxCell that should be resized.

isAutoSizeCells

mxGraph.prototype.isAutoSizeCells = function()

Returns autoSizeCells.

setAutoSizeCells

mxGraph.prototype.setAutoSizeCells = function(value)

Specifies if cell sizes should be automatically updated after a label change.  This implementation sets autoSizeCells to the given parameter.  To update the size of cells when the cells are added, set autoSizeCellsOnAdd to true.

Parameters

valueBoolean indicating if cells should be resized automatically.

isExtendParent

mxGraph.prototype.isExtendParent = function(cell)

Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.  This implementation returns isExtendParents if the cell is not an edge.

Parameters

cellmxCell that has been resized.

isExtendParents

mxGraph.prototype.isExtendParents = function()

Returns extendParents.

setExtendParents

mxGraph.prototype.setExtendParents = function(value)

Sets extendParents.

Parameters

valueNew boolean value for extendParents.

isExtendParentsOnAdd

mxGraph.prototype.isExtendParentsOnAdd = function(cell)

Returns extendParentsOnAdd.

setExtendParentsOnAdd

mxGraph.prototype.setExtendParentsOnAdd = function(value)

Sets extendParentsOnAdd.

Parameters

valueNew boolean value for extendParentsOnAdd.

isExtendParentsOnMove

mxGraph.prototype.isExtendParentsOnMove = function()

Returns <extendParentsOnMove>.

setExtendParentsOnMove

mxGraph.prototype.setExtendParentsOnMove = function(value)

Sets <extendParentsOnMove>.

Parameters

valueNew boolean value for extendParentsOnAdd.

isRecursiveResize

mxGraph.prototype.isRecursiveResize = function(state)

Returns recursiveResize.

Parameters

statemxCellState that is being resized.

setRecursiveResize

mxGraph.prototype.setRecursiveResize = function(value)

Sets recursiveResize.

Parameters

valueNew boolean value for recursiveResize.

isConstrainChild

mxGraph.prototype.isConstrainChild = function(cell)

Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.  This implementation returns false for all children of edges and isConstrainChildren otherwise.

Parameters

cellmxCell that should be constrained.

isConstrainChildren

mxGraph.prototype.isConstrainChildren = function()

Returns constrainChildren.

setConstrainChildren

mxGraph.prototype.setConstrainChildren = function(value)

Sets constrainChildren.

isConstrainRelativeChildren

mxGraph.prototype.isConstrainRelativeChildren = function()

Returns constrainRelativeChildren.

setConstrainRelativeChildren

mxGraph.prototype.setConstrainRelativeChildren = function(value)

Sets constrainRelativeChildren.

isConstrainChildren

setConstrainChildren

getOverlap

mxGraph.prototype.getOverlap = function(cell)

Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.  A value of 0 means all children must stay inside the parent, 1 means the child is allowed to be placed outside of the parent such that it touches one of the parents sides.  If isAllowOverlapParent returns false for the given cell, then this method returns 0.

Parameters

cellmxCell for which the overlap ratio should be returned.

isAllowOverlapParent

mxGraph.prototype.isAllowOverlapParent = function(cell)

Returns true if the given cell is allowed to be placed outside of the parents area.

Parameters

cellmxCell that represents the child to be checked.

getFoldableCells

mxGraph.prototype.getFoldableCells = function(cells,
collapse)

Returns the cells which are movable in the given array of cells.

isCellFoldable

mxGraph.prototype.isCellFoldable = function(cell,
collapse)

Returns true if the given cell is foldable.  This implementation returns true if the cell has at least one child and its style does not specify mxConstants.STYLE_FOLDABLE to be 0.

Parameters

cellmxCell whose foldable state should be returned.

isValidDropTarget

mxGraph.prototype.isValidDropTarget = function(cell,
cells,
evt)

Returns true if the given cell is a valid drop target for the specified cells.  If splitEnabled is true then this returns isSplitTarget for the given arguments else it returns true if the cell is not collapsed and its child count is greater than 0.

Parameters

cellmxCell that represents the possible drop target.
cellsmxCells that should be dropped into the target.
evtMouseevent that triggered the invocation.

isSplitTarget

mxGraph.prototype.isSplitTarget = function(target,
cells,
evt)

Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.

Parameters

targetmxCell that represents the edge to be splitted.
cellsmxCells that should split the edge.
evtMouseevent that triggered the invocation.

getDropTarget

mxGraph.prototype.getDropTarget = function(cells,
evt,
cell,
clone)

Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.  If the given array contains a swimlane and swimlaneNesting is false then this always returns null.  If no cell is given, then the bottommost swimlane at the location of the given event is returned.

This function should only be used if isDropEnabled returns true.

Parameters

cellsArray of mxCells which are to be dropped onto the target.
evtMouseevent for the drag and drop.
cellmxCell that is under the mousepointer.
cloneOptional boolean to indicate of cells will be cloned.

Cell retrieval

getDefaultParent

mxGraph.prototype.getDefaultParent = function()

Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.  The value returned by this function should be used as the parent for new cells (aka default layer).

setDefaultParent

mxGraph.prototype.setDefaultParent = function(cell)

Sets the defaultParent to the given cell.  Set this to null to return the first child of the root in getDefaultParent.

getSwimlane

mxGraph.prototype.getSwimlane = function(cell)

Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.

Parameters

cellmxCell for which the ancestor swimlane should be returned.

getSwimlaneAt

mxGraph.prototype.getSwimlaneAt = function (x,
y,
parent)

Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.

Parameters

xX-coordinate of the location to be checked.
yY-coordinate of the location to be checked.
parentmxCell that should be used as the root of the recursion.  Default is defaultParent.

getCellAt

mxGraph.prototype.getCellAt = function(x,
y,
parent,
vertices,
edges,
ignoreFn)

Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.  This will also return swimlanes if the given location intersects the content area of the swimlane.  If this is not desired, then the hitsSwimlaneContent may be used if the returned cell is a swimlane to determine if the location is inside the content area or on the actual title of the swimlane.

Parameters

xX-coordinate of the location to be checked.
yY-coordinate of the location to be checked.
parentmxCell that should be used as the root of the recursion.  Default is current root of the view or the root of the model.
verticesOptional boolean indicating if vertices should be returned.  Default is true.
edgesOptional boolean indicating if edges should be returned.  Default is true.
ignoreFnOptional function that returns true if cell should be ignored.  The function is passed the cell state and the x and y parameter.

intersects

mxGraph.prototype.intersects = function(state,
x,
y)

Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.

Parameters

statemxCellState that represents the cell state.
xX-coordinate of the location to be checked.
yY-coordinate of the location to be checked.

hitsSwimlaneContent

mxGraph.prototype.hitsSwimlaneContent = function(swimlane,
x,
y)

Returns true if the given coordinate pair is inside the content are of the given swimlane.

Parameters

swimlanemxCell that specifies the swimlane.
xX-coordinate of the mouse event.
yY-coordinate of the mouse event.

getChildVertices

mxGraph.prototype.getChildVertices = function(parent)

Returns the visible child vertices of the given parent.

Parameters

parentmxCell whose children should be returned.

getChildEdges

mxGraph.prototype.getChildEdges = function(parent)

Returns the visible child edges of the given parent.

Parameters

parentmxCell whose child vertices should be returned.

getChildCells

mxGraph.prototype.getChildCells = function(parent,
vertices,
edges)

Returns the visible child vertices or edges in the given parent.  If vertices and edges is false, then all children are returned.

Parameters

parentmxCell whose children should be returned.
verticesOptional boolean that specifies if child vertices should be returned.  Default is false.
edgesOptional boolean that specifies if child edges should be returned.  Default is false.

getConnections

mxGraph.prototype.getConnections = function(cell,
parent)

Returns all visible edges connected to the given cell without loops.

Parameters

cellmxCell whose connections should be returned.
parentOptional parent of the opposite end for a connection to be returned.

getIncomingEdges

mxGraph.prototype.getIncomingEdges = function(cell,
parent)

Returns the visible incoming edges for the given cell.  If the optional parent argument is specified, then only child edges of the given parent are returned.

Parameters

cellmxCell whose incoming edges should be returned.
parentOptional parent of the opposite end for an edge to be returned.

getOutgoingEdges

mxGraph.prototype.getOutgoingEdges = function(cell,
parent)

Returns the visible outgoing edges for the given cell.  If the optional parent argument is specified, then only child edges of the given parent are returned.

Parameters

cellmxCell whose outgoing edges should be returned.
parentOptional parent of the opposite end for an edge to be returned.

getEdges

mxGraph.prototype.getEdges = function(cell,
parent,
incoming,
outgoing,
includeLoops,
recurse)

Returns the incoming and/or outgoing edges for the given cell.  If the optional parent argument is specified, then only edges are returned where the opposite is in the given parent cell.  If at least one of incoming or outgoing is true, then loops are ignored, if both are false, then all edges connected to the given cell are returned including loops.

Parameters

cellmxCell whose edges should be returned.
parentOptional parent of the opposite end for an edge to be returned.
incomingOptional boolean that specifies if incoming edges should be included in the result.  Default is true.
outgoingOptional boolean that specifies if outgoing edges should be included in the result.  Default is true.
includeLoopsOptional boolean that specifies if loops should be included in the result.  Default is true.
recurseOptional boolean the specifies if the parent specified only need be an ancestral parent, true, or the direct parent, false.  Default is false

isValidAncestor

mxGraph.prototype.isValidAncestor = function(cell,
parent,
recurse)

Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.

Parameters

cellmxCell the possible child cell
parentmxCell the possible parent cell
recurseboolean whether or not to recurse the child ancestors

getOpposites

mxGraph.prototype.getOpposites = function(edges,
terminal,
sources,
targets)

Returns all distinct visible opposite cells for the specified terminal on the given edges.

Parameters

edgesArray of mxCells that contains the edges whose opposite terminals should be returned.
terminalTerminal that specifies the end whose opposite should be returned.
sourceOptional boolean that specifies if source terminals should be included in the result.  Default is true.
targetsOptional boolean that specifies if targer terminals should be included in the result.  Default is true.

getEdgesBetween

mxGraph.prototype.getEdgesBetween = function(source,
target,
directed)

Returns the edges between the given source and target.  This takes into account collapsed and invisible cells and returns the connected edges as displayed on the screen.

Parameters

source - target - directed -

getPointForEvent

mxGraph.prototype.getPointForEvent = function(evt,
addOffset)

Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.

Parameters

evtMousevent that contains the mouse pointer location.
addOffsetOptional boolean that specifies if the position should be offset by half of the gridSize.  Default is true.

getCells

mxGraph.prototype.getCells = function(x,
y,
width,
height,
parent,
result)

Returns the child vertices and edges of the given parent that are contained in the given rectangle.  The result is added to the optional result array, which is returned.  If no result array is specified then a new array is created and returned.

Parameters

xX-coordinate of the rectangle.
yY-coordinate of the rectangle.
widthWidth of the rectangle.
heightHeight of the rectangle.
parentmxCell that should be used as the root of the recursion.  Default is current root of the view or the root of the model.
resultOptional array to store the result in.

getCellsBeyond

mxGraph.prototype.getCellsBeyond = function(x0,
y0,
parent,
rightHalfpane,
bottomHalfpane)

Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.

Parameters

x0X-coordinate of the origin.
y0Y-coordinate of the origin.
parentOptional mxCell whose children should be checked.  Default is defaultParent.
rightHalfpaneBoolean indicating if the cells in the right halfpane from the origin should be returned.
bottomHalfpaneBoolean indicating if the cells in the bottom halfpane from the origin should be returned.

findTreeRoots

mxGraph.prototype.findTreeRoots = function(parent,
isolate,
invert)

Returns all children in the given parent which do not have incoming edges.  If the result is empty then the with the greatest difference between incoming and outgoing edges is returned.

Parameters

parentmxCell whose children should be checked.
isolateOptional boolean that specifies if edges should be ignored if the opposite end is not a child of the given parent cell.  Default is false.
invertOptional boolean that specifies if outgoing or incoming edges should be counted for a tree root.  If false then outgoing edges will be counted.  Default is false.

traverse

mxGraph.prototype.traverse = function(vertex,
directed,
func,
edge,
visited,
inverse)

Traverses the (directed) graph invoking the given function for each visited vertex and edge.  The function is invoked with the current vertex and the incoming edge as a parameter.  This implementation makes sure each vertex is only visited once.  The function may return false if the traversal should stop at the given vertex.

Example

mxLog.show();
var cell = graph.getSelectionCell();
graph.traverse(cell, false, function(vertex, edge)
{
  mxLog.debug(graph.getLabel(vertex));
});

Parameters

vertexmxCell that represents the vertex where the traversal starts.
directedOptional boolean indicating if edges should only be traversed from source to target.  Default is true.
funcVisitor function that takes the current vertex and the incoming edge as arguments.  The traversal stops if the function returns false.
edgeOptional mxCell that represents the incoming edge.  This is null for the first step of the traversal.
visitedOptional mxDictionary from cells to true for the visited cells.
inverseOptional boolean to traverse in inverse direction.  Default is false.  This is ignored if directed is false.

Selection

isCellSelected

mxGraph.prototype.isCellSelected = function(cell)

Returns true if the given cell is selected.

Parameters

cellmxCell for which the selection state should be returned.

isSelectionEmpty

mxGraph.prototype.isSelectionEmpty = function()

Returns true if the selection is empty.

clearSelection

mxGraph.prototype.clearSelection = function()

Clears the selection using mxGraphSelectionModel.clear.

getSelectionCount

mxGraph.prototype.getSelectionCount = function()

Returns the number of selected cells.

getSelectionCell

mxGraph.prototype.getSelectionCell = function()

Returns the first cell from the array of selected mxCells.

getSelectionCells

mxGraph.prototype.getSelectionCells = function()

Returns the array of selected mxCells.

setSelectionCell

mxGraph.prototype.setSelectionCell = function(cell)

Sets the selection cell.

Parameters

cellmxCell to be selected.

setSelectionCells

mxGraph.prototype.setSelectionCells = function(cells)

Sets the selection cell.

Parameters

cellsArray of mxCells to be selected.

addSelectionCell

mxGraph.prototype.addSelectionCell = function(cell)

Adds the given cell to the selection.

Parameters

cellmxCell to be add to the selection.

addSelectionCells

mxGraph.prototype.addSelectionCells = function(cells)

Adds the given cells to the selection.

Parameters

cellsArray of mxCells to be added to the selection.

removeSelectionCell

mxGraph.prototype.removeSelectionCell = function(cell)

Removes the given cell from the selection.

Parameters

cellmxCell to be removed from the selection.

removeSelectionCells

mxGraph.prototype.removeSelectionCells = function(cells)

Removes the given cells from the selection.

Parameters

cellsArray of mxCells to be removed from the selection.

selectRegion

mxGraph.prototype.selectRegion = function(rect,
evt)

Selects and returns the cells inside the given rectangle for the specified event.

Parameters

rectmxRectangle that represents the region to be selected.
evtMouseevent that triggered the selection.

selectNextCell

mxGraph.prototype.selectNextCell = function()

Selects the next cell.

selectPreviousCell

mxGraph.prototype.selectPreviousCell = function()

Selects the previous cell.

selectParentCell

mxGraph.prototype.selectParentCell = function()

Selects the parent cell.

selectChildCell

mxGraph.prototype.selectChildCell = function()

Selects the first child cell.

selectCell

mxGraph.prototype.selectCell = function(isNext,
isParent,
isChild)

Selects the next, parent, first child or previous cell, if all arguments are false.

Parameters

isNextBoolean indicating if the next cell should be selected.
isParentBoolean indicating if the parent cell should be selected.
isChildBoolean indicating if the first child cell should be selected.

selectAll

mxGraph.prototype.selectAll = function(parent,
descendants)

Selects all children of the given parent cell or the children of the default parent if no parent is specified.  To select leaf vertices and/or edges use selectCells.

Parameters

parentOptional mxCell whose children should be selected.  Default is defaultParent.
descendantsOptional boolean specifying whether all descendants should be selected.  Default is false.

selectVertices

mxGraph.prototype.selectVertices = function(parent)

Select all vertices inside the given parent or the default parent.

selectVertices

Select all vertices inside the given parent or the default parent.

selectCells

mxGraph.prototype.selectCells = function(vertices,
edges,
parent)

Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.  Use selectAll to select all cells.  For vertices, only cells with no children are selected.

Parameters

verticesBoolean indicating if vertices should be selected.
edgesBoolean indicating if edges should be selected.
parentOptional mxCell that acts as the root of the recursion.  Default is defaultParent.

selectCellForEvent

mxGraph.prototype.selectCellForEvent = function(cell,
evt)

Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.

Parameters

cellmxCell to be selected.
evtOptional mouseevent that triggered the selection.

selectCellsForEvent

mxGraph.prototype.selectCellsForEvent = function(cells,
evt)

Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.

Parameters

cellsArray of mxCells to be selected.
evtOptional mouseevent that triggered the selection.

Selection state

createHandler

mxGraph.prototype.createHandler = function(state)

Creates a new handler for the given cell state.  This implementation returns a new mxEdgeHandler of the corresponding cell is an edge, otherwise it returns an mxVertexHandler.

Parameters

statemxCellState whose handler should be created.

createVertexHandler

mxGraph.prototype.createVertexHandler = function(state)

Hooks to create a new mxVertexHandler for the given mxCellState.

Parameters

statemxCellState to create the handler for.

createEdgeHandler

mxGraph.prototype.createEdgeHandler = function(state,
edgeStyle)

Hooks to create a new mxEdgeHandler for the given mxCellState.

Parameters

statemxCellState to create the handler for.

createEdgeSegmentHandler

mxGraph.prototype.createEdgeSegmentHandler = function(state)

Hooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.

Parameters

statemxCellState to create the handler for.

createElbowEdgeHandler

mxGraph.prototype.createElbowEdgeHandler = function(state)

Hooks to create a new mxElbowEdgeHandler for the given mxCellState.

Parameters

statemxCellState to create the handler for.

Graph events

addMouseListener

mxGraph.prototype.addMouseListener = function(listener)

Adds a listener to the graph event dispatch loop.  The listener must implement the mouseDown, mouseMove and mouseUp methods as shown in the mxMouseEvent class.

Parameters

listenerListener to be added to the graph event listeners.

removeMouseListener

mxGraph.prototype.removeMouseListener = function(listener)

Removes the specified graph listener.

Parameters

listenerListener to be removed from the graph event listeners.

updateMouseEvent

mxGraph.prototype.updateMouseEvent = function(me,
evtName)

Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.

Parameters

memxMouseEvent to be updated.
evtNameName of the mouse event.

getStateForEvent

Returns the state for the given touch event.

isEventIgnored

mxGraph.prototype.isEventIgnored = function(evtName,
me,
sender)

Returns true if the event should be ignored in fireMouseEvent.

isSyntheticEventIgnored

mxGraph.prototype.isSyntheticEventIgnored = function(evtName,
me,
sender)

Hook for ignoring synthetic mouse events after touchend in Firefox.

isEventSourceIgnored

mxGraph.prototype.isEventSourceIgnored = function(evtName,
me)

Returns true if the event should be ignored in fireMouseEvent.  This implementation returns true for select, option and input (if not of type checkbox, radio, button, submit or file) event sources if the event is not a mouse event or a left mouse button press event.

Parameters

evtNameThe name of the event.
memxMouseEvent that should be ignored.

getEventState

mxGraph.prototype.getEventState = function(state)

Returns the mxCellState to be used when firing the mouse event for the given state.  This implementation returns the given state.

Parameters

<mxCellState>State whose event source should be returned.

fireMouseEvent

mxGraph.prototype.fireMouseEvent = function(evtName,
me,
sender)

Dispatches the given event in the graph event dispatch loop.  Possible event names are mxEvent.MOUSE_DOWN, mxEvent.MOUSE_MOVE and mxEvent.MOUSE_UP.  All listeners are invoked for all events regardless of the consumed state of the event.

Parameters

evtNameString that specifies the type of event to be dispatched.
memxMouseEvent to be fired.
senderOptional sender argument.  Default is this.

consumeMouseEvent

mxGraph.prototype.consumeMouseEvent = function(evtName,
me,
sender)

Consumes the given mxMouseEvent if it’s a touchStart event.

fireGestureEvent

mxGraph.prototype.fireGestureEvent = function(evt,
cell)

Dispatches a mxEvent.GESTURE event.  The following example will resize the cell under the mouse based on the scale property of the native touch event.

graph.addListener(mxEvent.GESTURE, function(sender, eo)
{
  var evt = eo.getProperty('event');
  var state = graph.view.getState(eo.getProperty('cell'));

  if (graph.isEnabled() && graph.isCellResizable(state.cell) && Math.abs(1 - evt.scale) > 0.2)
  {
    var scale = graph.view.scale;
    var tr = graph.view.translate;

    var w = state.width * evt.scale;
    var h = state.height * evt.scale;
    var x = state.x - (w - state.width) / 2;
    var y = state.y - (h - state.height) / 2;

    var bounds = new mxRectangle(graph.snap(x / scale) - tr.x,
         graph.snap(y / scale) - tr.y, graph.snap(w / scale), graph.snap(h / scale));
    graph.resizeCell(state.cell, bounds);
    eo.consume();
  }
});

Parameters

evtGestureend event that represents the gesture.
cellOptional mxCell associated with the gesture.

destroy

mxGraph.prototype.destroy = function()

Destroys the graph and all its resources.

mxCellOverlay

Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.  Overlays can handle and fire <click> events and are added to the graph using mxGraph.addCellOverlay, and removed using mxGraph.removeCellOverlay, or mxGraph.removeCellOverlays to remove all overlays.  The mxGraph.getCellOverlays function returns the array of overlays for a given cell in a graph.  If multiple overlays exist for the same cell, then getBounds should be overridden in at least one of the overlays.

Overlays appear on top of all cells in a special layer.  If this is not desirable, then the image must be rendered as part of the shape or label of the cell instead.

Example

The following adds a new overlays for a given vertex and selects the cell if the overlay is clicked.

var overlay = new mxCellOverlay(img, html);
graph.addCellOverlay(vertex, overlay);
overlay.addListener(mxEvent.CLICK, function(sender, evt)
{
  var cell = evt.getProperty('cell');
  graph.setSelectionCell(cell);
});

For cell overlays to be printed use mxPrintPreview.printOverlays.

Summary
Events
mxEvent.CLICKFires when the user clicks on the overlay.
Functions
mxCellOverlayConstructs a new overlay using the given image and tooltip.
Variables
imageHolds the mxImage to be used as the icon.
tooltipHolds the optional string to be used as the tooltip.
alignHolds the horizontal alignment for the overlay.
verticalAlignHolds the vertical alignment for the overlay.
offsetHolds the offset as an mxPoint.
cursorHolds the cursor for the overlay.
defaultOverlapDefines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
Functions
getBoundsReturns the bounds of the overlay for the given mxCellState as an mxRectangle.
toStringReturns the textual representation of the overlay to be used as the tooltip.

Events

mxEvent.CLICK

Fires when the user clicks on the overlay.  The <code>event</code> property contains the corresponding mouse event and the <code>cell</code> property contains the cell.  For touch devices this is fired if the element receives a touchend event.

Functions

mxCellOverlay

function mxCellOverlay(image,
tooltip,
align,
verticalAlign,
offset,
cursor)

Constructs a new overlay using the given image and tooltip.

Parameters

imagemxImage that represents the icon to be displayed.
tooltipOptional string that specifies the tooltip.
alignOptional horizontal alignment for the overlay.  Possible values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> (default).
verticalAlignVertical alignment for the overlay.  Possible values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> (default).

Variables

image

mxCellOverlay.prototype.image

Holds the mxImage to be used as the icon.

tooltip

mxCellOverlay.prototype.tooltip

Holds the optional string to be used as the tooltip.

align

mxCellOverlay.prototype.align

Holds the horizontal alignment for the overlay.  Default is mxConstants.ALIGN_RIGHT.  For edges, the overlay always appears in the center of the edge.

verticalAlign

mxCellOverlay.prototype.verticalAlign

Holds the vertical alignment for the overlay.  Default is mxConstants.ALIGN_BOTTOM.  For edges, the overlay always appears in the center of the edge.

offset

mxCellOverlay.prototype.offset

Holds the offset as an mxPoint.  The offset will be scaled according to the current scale.

cursor

mxCellOverlay.prototype.cursor

Holds the cursor for the overlay.  Default is ‘help’.

defaultOverlap

mxCellOverlay.prototype.defaultOverlap

Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.  Default is 0.5.

Functions

getBounds

mxCellOverlay.prototype.getBounds = function(state)

Returns the bounds of the overlay for the given mxCellState as an mxRectangle.  This should be overridden when using multiple overlays per cell so that the overlays do not overlap.

The following example will place the overlay along an edge (where x=[-1..1] from the start to the end of the edge and y is the orthogonal offset in px).

overlay.getBounds = function(state)
{
  var bounds = mxCellOverlay.prototype.getBounds.apply(this, arguments);

  if (state.view.graph.getModel().isEdge(state.cell))
  {
    var pt = state.view.getPoint(state, {x: 0, y: 0, relative: true});

    bounds.x = pt.x - bounds.width / 2;
    bounds.y = pt.y - bounds.height / 2;
  }

  return bounds;
};

Parameters

statemxCellState that represents the current state of the associated cell.

toString

mxCellOverlay.prototype.toString = function()

Returns the textual representation of the overlay to be used as the tooltip.  This implementation returns tooltip.

mxOutline

Implements an outline (aka overview) for a graph.  Set updateOnPan to true to enable updates while the source graph is panning.

Example

var outline = new mxOutline(graph, div);

If an outline is used in an mxWindow in IE8 standards mode, the following code makes sure that the shadow filter is not inherited and that any transparent elements in the graph do not show the page background, but the background of the graph container.

if (document.documentMode == 8)
{
  container.style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
}

To move the graph to the top, left corner the following code can be used.

var scale = graph.view.scale;
var bounds = graph.getGraphBounds();
graph.view.setTranslate(-bounds.x / scale, -bounds.y / scale);

To toggle the suspended mode, the following can be used.

outline.suspended = !outln.suspended;
if (!outline.suspended)
{
  outline.update(true);
}
Summary
Functions
mxOutlineConstructs a new outline for the specified graph inside the given container.
sourceReference to the source mxGraph.
outlineReference to the mxGraph that renders the outline.
graphRenderHintRenderhint to be used for the outline graph.
Variables
enabledSpecifies if events are handled.
showViewportSpecifies a viewport rectangle should be shown.
borderBorder to be added at the bottom and right.
enabledSpecifies the size of the sizer handler.
labelsVisibleSpecifies if labels should be visible in the outline.
updateOnPanSpecifies if update should be called for mxEvent.PAN in the source graph.
sizerImageOptional mxImage to be used for the sizer.
minScaleMinimum scale to be used.
suspendedOptional boolean flag to suspend updates.
forceVmlHandlesSpecifies if VML should be used to render the handles in this control.
Functions
createGraphCreates the mxGraph used in the outline.
initInitializes the outline inside the given container.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
setZoomEnabledEnables or disables the zoom handling by showing or hiding the respective handle.
refreshInvokes update and revalidate the outline.
createSizerCreates the shape used as the sizer.
getSourceContainerSizeReturns the size of the source container.
getOutlineOffsetReturns the offset for drawing the outline graph.
getOutlineOffsetReturns the offset for drawing the outline graph.
updateUpdates the outline.
mouseDownHandles the event by starting a translation or zoom.
mouseMoveHandles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.
getTranslateForEventGets the translate for the given mouse event.
mouseUpHandles the event by applying the translation or zoom to <graph>.
destroyDestroy this outline and removes all listeners from source.

Functions

mxOutline

function mxOutline(source,
container)

Constructs a new outline for the specified graph inside the given container.

Parameters

sourcemxGraph to create the outline for.
containerDOM node that will contain the outline.

source

Reference to the source mxGraph.

outline

Reference to the mxGraph that renders the outline.

graphRenderHint

Renderhint to be used for the outline graph.  Default is faster.

Variables

enabled

mxOutline.prototype.enabled

Specifies if events are handled.  Default is true.

showViewport

mxOutline.prototype.showViewport

Specifies a viewport rectangle should be shown.  Default is true.

border

mxOutline.prototype.border

Border to be added at the bottom and right.  Default is 10.

enabled

Specifies the size of the sizer handler.  Default is 8.

labelsVisible

mxOutline.prototype.labelsVisible

Specifies if labels should be visible in the outline.  Default is false.

updateOnPan

mxOutline.prototype.updateOnPan

Specifies if update should be called for mxEvent.PAN in the source graph.  Default is false.

sizerImage

mxOutline.prototype.sizerImage

Optional mxImage to be used for the sizer.  Default is null.

minScale

mxOutline.prototype.minScale

Minimum scale to be used.  Default is 0.001.

suspended

mxOutline.prototype.suspended

Optional boolean flag to suspend updates.  Default is false.  This flag will also suspend repaints of the outline.  To toggle this switch, use the following code.

nav.suspended = !nav.suspended;

if (!nav.suspended)
{
  nav.update(true);
}

forceVmlHandles

mxOutline.prototype.forceVmlHandles

Specifies if VML should be used to render the handles in this control.  This is true for IE8 standards mode and false for all other browsers and modes.  This is a workaround for rendering issues of HTML elements over elements with filters in IE 8 standards mode.

Functions

createGraph

mxOutline.prototype.createGraph = function(container)

Creates the mxGraph used in the outline.

init

mxOutline.prototype.init = function(container)

Initializes the outline inside the given container.

isEnabled

mxOutline.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxOutline.prototype.setEnabled = function(value)

Enables or disables event handling.  This implementation updates enabled.

Parameters

valueBoolean that specifies the new enabled state.

setZoomEnabled

mxOutline.prototype.setZoomEnabled = function(value)

Enables or disables the zoom handling by showing or hiding the respective handle.

Parameters

valueBoolean that specifies the new enabled state.

refresh

mxOutline.prototype.refresh = function()

Invokes update and revalidate the outline.  This method is deprecated.

createSizer

mxOutline.prototype.createSizer = function()

Creates the shape used as the sizer.

getSourceContainerSize

mxOutline.prototype.getSourceContainerSize = function()

Returns the size of the source container.

getOutlineOffset

mxOutline.prototype.getOutlineOffset = function(scale)

Returns the offset for drawing the outline graph.

getOutlineOffset

Returns the offset for drawing the outline graph.

update

mxOutline.prototype.update = function(revalidate)

Updates the outline.

mouseDown

mxOutline.prototype.mouseDown = function(sender,
me)

Handles the event by starting a translation or zoom.

mouseMove

mxOutline.prototype.mouseMove = function(sender,
me)

Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.

getTranslateForEvent

mxOutline.prototype.getTranslateForEvent = function(me)

Gets the translate for the given mouse event.  Here is an example to limit the outline to stay within positive coordinates:

outline.getTranslateForEvent = function(me)
{
  var pt = new mxPoint(me.getX() - this.startX, me.getY() - this.startY);

  if (!this.zoom)
  {
    var tr = this.source.view.translate;
    pt.x = Math.max(tr.x * this.outline.view.scale, pt.x);
    pt.y = Math.max(tr.y * this.outline.view.scale, pt.y);
  }

  return pt;
};

mouseUp

mxOutline.prototype.mouseUp = function(sender,
me)

Handles the event by applying the translation or zoom to <graph>.

destroy

mxOutline.prototype.destroy = function()

Destroy this outline and removes all listeners from source.

mxMultiplicity

Defines invalid connections along with the error messages that they produce.  To add or remove rules on a graph, you must add/remove instances of this class to mxGraph.multiplicities.

Example

graph.multiplicities.push(new mxMultiplicity(
  true, 'rectangle', null, null, 0, 2, ['circle'],
  'Only 2 targets allowed',
  'Only circle targets allowed'));

Defines a rule where each rectangle must be connected to no more than 2 circles and no other types of targets are allowed.

Summary
Functions
mxMultiplicityInstantiate class mxMultiplicity in order to describe allowed connections in a graph.
Variables
typeDefines the type of the source or target terminal.
attrOptional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.
valueOptional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.
sourceBoolean that specifies if the rule is applied to the source or target terminal of an edge.
minDefines the minimum number of connections for which this rule applies.
maxDefines the maximum number of connections for which this rule applies.
validNeighborsHolds an array of strings that specify the type of neighbor for which this rule applies.
validNeighborsAllowedBoolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.
countErrorHolds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.
typeErrorHolds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.
Functions
checkChecks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.
checkNeighborsChecks if there are any valid neighbours in validNeighbors.
checkTerminalChecks the given terminal cell and returns true if this rule applies.
checkTypeChecks the type of the given value.

Functions

mxMultiplicity

function mxMultiplicity(source,
type,
attr,
value,
min,
max,
validNeighbors,
countError,
typeError,
validNeighborsAllowed)

Instantiate class mxMultiplicity in order to describe allowed connections in a graph.  Not all constraints can be enforced while editing, some must be checked at validation time.  The countError and typeError are treated as resource keys in mxResources.

Parameters

sourceBoolean indicating if this rule applies to the source or target terminal.
typeType of the source or target terminal that this rule applies to.  See type for more information.
attrOptional attribute name to match the source or target terminal.
valueOptional attribute value to match the source or target terminal.
minMinimum number of edges for this rule.  Default is 1.
maxMaximum number of edges for this rule. n means infinite.  Default is n.
validNeighborsArray of types of the opposite terminal for which this rule applies.
countErrorError to be displayed for invalid number of edges.
typeErrorError to be displayed for invalid opposite terminals.
validNeighborsAllowedOptional boolean indicating if the array of opposite types should be valid or invalid.

Variables

type

mxMultiplicity.prototype.type

Defines the type of the source or target terminal.  The type is a string passed to mxUtils.isNode together with the source or target vertex value as the first argument.

attr

mxMultiplicity.prototype.attr

Optional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.

value

mxMultiplicity.prototype.value

Optional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.

source

mxMultiplicity.prototype.source

Boolean that specifies if the rule is applied to the source or target terminal of an edge.

min

mxMultiplicity.prototype.min

Defines the minimum number of connections for which this rule applies.  Default is 0.

max

mxMultiplicity.prototype.max

Defines the maximum number of connections for which this rule applies.  A value of ‘n’ means unlimited times.  Default is ‘n’.

validNeighbors

mxMultiplicity.prototype.validNeighbors

Holds an array of strings that specify the type of neighbor for which this rule applies.  The strings are used in <mxCell.is> on the opposite terminal to check if the rule applies to the connection.

validNeighborsAllowed

mxMultiplicity.prototype.validNeighborsAllowed

Boolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.

countError

mxMultiplicity.prototype.countError

Holds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.

typeError

mxMultiplicity.prototype.typeError

Holds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.

Functions

check

mxMultiplicity.prototype.check = function(graph,
edge,
source,
target,
sourceOut,
targetIn)

Checks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.

Parameters

graphReference to the enclosing mxGraph instance.
edgemxCell that represents the edge to validate.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
sourceOutNumber of outgoing edges from the source terminal.
targetInNumber of incoming edges for the target terminal.

checkNeighbors

mxMultiplicity.prototype.checkNeighbors = function(graph,
edge,
source,
target)

Checks if there are any valid neighbours in validNeighbors.  This is only called if validNeighbors is a non-empty array.

checkTerminal

mxMultiplicity.prototype.checkTerminal = function(graph,
terminal,
edge)

Checks the given terminal cell and returns true if this rule applies.  The given cell is the source or target of the given edge, depending on source.  This implementation uses checkType on the terminal’s value.

checkType

mxMultiplicity.prototype.checkType = function(graph,
value,
type,
attr,
attrValue)

Checks the type of the given value.

mxLayoutManager

Implements a layout manager that runs a given layout after any changes to the graph

Example

var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell)
{
  return layout;
};
Summary
Events
mxEvent.LAYOUT_CELLSFires between begin- and endUpdate after all cells have been layouted in layoutCells.
Functions
mxLayoutManagerConstructs a new automatic layout for the given graph.
Variables
graphReference to the enclosing mxGraph.
bubblingSpecifies if the layout should bubble along the cell hierarchy.
enabledSpecifies if event handling is enabled.
updateHandlerHolds the function that handles the endUpdate event.
moveHandlerHolds the function that handles the move event.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isBubblingReturns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed.
setBubblingSets bubbling.
getGraphReturns the graph that this layout operates on.
setGraphSets the graph that the layouts operate on.
getLayoutReturns the layout to be executed for the given graph and parent.
beforeUndoCalled from the undoHandler.
executeLayoutExecutes the given layout on the given parent.
cellsMovedCalled from the moveHandler.
getCellsForEditReturns the cells to be layouted for the given sequence of changes.
getCellsForChangeExecutes all layouts which have been scheduled during the changes.
layoutCellsExecutes all layouts which have been scheduled during the changes.
executeLayoutExecutes the given layout on the given parent.
destroyRemoves all handlers from the graph and deletes the reference to it.

Events

mxEvent.LAYOUT_CELLS

Fires between begin- and endUpdate after all cells have been layouted in layoutCells.  The <code>cells</code> property contains all cells that have been passed to layoutCells.

Functions

mxLayoutManager

function mxLayoutManager(graph)

Constructs a new automatic layout for the given graph.

Arguments

graphReference to the enclosing graph.

Variables

graph

mxLayoutManager.prototype.graph

Reference to the enclosing mxGraph.

bubbling

mxLayoutManager.prototype.bubbling

Specifies if the layout should bubble along the cell hierarchy.  Default is true.

enabled

mxLayoutManager.prototype.enabled

Specifies if event handling is enabled.  Default is true.

updateHandler

mxLayoutManager.prototype.updateHandler

Holds the function that handles the endUpdate event.

moveHandler

mxLayoutManager.prototype.moveHandler

Holds the function that handles the move event.

Functions

isEnabled

mxLayoutManager.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxLayoutManager.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

Parameters

enabledBoolean that specifies the new enabled state.

isBubbling

mxLayoutManager.prototype.isBubbling = function()

Returns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed.  This implementation returns bubbling.

setBubbling

mxLayoutManager.prototype.setBubbling = function(value)

Sets bubbling.

getGraph

mxLayoutManager.prototype.getGraph = function()

Returns the graph that this layout operates on.

setGraph

mxLayoutManager.prototype.setGraph = function(graph)

Sets the graph that the layouts operate on.

getLayout

mxLayoutManager.prototype.getLayout = function(parent)

Returns the layout to be executed for the given graph and parent.

beforeUndo

mxLayoutManager.prototype.beforeUndo = function(undoableEdit)

Called from the undoHandler.

Parameters

cellArray of mxCells that have been moved.
evtMouse event that represents the mousedown.

executeLayout

mxLayoutManager.prototype.executeLayoutForCells = function(cells)

Executes the given layout on the given parent.

cellsMoved

mxLayoutManager.prototype.cellsMoved = function(cells,
evt)

Called from the moveHandler.

Parameters

cellArray of mxCells that have been moved.
evtMouse event that represents the mousedown.

getCellsForEdit

Returns the cells to be layouted for the given sequence of changes.

getCellsForChange

mxLayoutManager.prototype.getCellsForChange = function(change)

Executes all layouts which have been scheduled during the changes.

layoutCells

mxLayoutManager.prototype.layoutCells = function(cells)

Executes all layouts which have been scheduled during the changes.

executeLayout

mxLayoutManager.prototype.executeLayout = function(layout,
parent)

Executes the given layout on the given parent.

destroy

mxLayoutManager.prototype.destroy = function()

Removes all handlers from the graph and deletes the reference to it.

mxSwimlaneManager

Manager for swimlanes and nested swimlanes that sets the size of newly added swimlanes to that of their siblings, and propagates changes to the size of a swimlane to its siblings, if <siblings> is true, and its ancestors, if <bubbling> is true.

Summary
Functions
mxSwimlaneManagerConstructs a new swimlane manager for the given graph.
Variables
graphReference to the enclosing mxGraph.
enabledSpecifies if event handling is enabled.
horizontalSpecifies the orientation of the swimlanes.
addEnabledSpecifies if newly added cells should be resized to match the size of their existing siblings.
resizeEnabledSpecifies if resizing of swimlanes should be handled.
moveHandlerHolds the function that handles the move event.
moveHandlerHolds the function that handles the move event.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isHorizontalReturns horizontal.
setHorizontalSets horizontal.
isAddEnabledReturns addEnabled.
setAddEnabledSets addEnabled.
isResizeEnabledReturns resizeEnabled.
setResizeEnabledSets resizeEnabled.
getGraphReturns the graph that this manager operates on.
setGraphSets the graph that the manager operates on.
isSwimlaneIgnoredReturns true if the given swimlane should be ignored.
isCellHorizontalReturns true if the given cell is horizontal.
cellsAddedCalled if any cells have been added.
swimlaneAddedUpdates the size of the given swimlane to match that of any existing siblings swimlanes.
cellsResizedCalled if any cells have been resizes.
resizeSwimlaneCalled from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if <bubbling> is true.
destroyRemoves all handlers from the graph and deletes the reference to it.

Functions

mxSwimlaneManager

function mxSwimlaneManager(graph,
horizontal,
addEnabled,
resizeEnabled)

Constructs a new swimlane manager for the given graph.

Arguments

graphReference to the enclosing graph.

Variables

graph

mxSwimlaneManager.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxSwimlaneManager.prototype.enabled

Specifies if event handling is enabled.  Default is true.

horizontal

mxSwimlaneManager.prototype.horizontal

Specifies the orientation of the swimlanes.  Default is true.

addEnabled

mxSwimlaneManager.prototype.addEnabled

Specifies if newly added cells should be resized to match the size of their existing siblings.  Default is true.

resizeEnabled

mxSwimlaneManager.prototype.resizeEnabled

Specifies if resizing of swimlanes should be handled.  Default is true.

moveHandler

Holds the function that handles the move event.

moveHandler

Holds the function that handles the move event.

Functions

isEnabled

mxSwimlaneManager.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxSwimlaneManager.prototype.setEnabled = function(value)

Enables or disables event handling.  This implementation updates enabled.

Parameters

enabledBoolean that specifies the new enabled state.

isHorizontal

mxSwimlaneManager.prototype.isHorizontal = function()

Returns horizontal.

setHorizontal

mxSwimlaneManager.prototype.setHorizontal = function(value)

Sets horizontal.

isAddEnabled

mxSwimlaneManager.prototype.isAddEnabled = function()

Returns addEnabled.

setAddEnabled

mxSwimlaneManager.prototype.setAddEnabled = function(value)

Sets addEnabled.

isResizeEnabled

mxSwimlaneManager.prototype.isResizeEnabled = function()

Returns resizeEnabled.

setResizeEnabled

mxSwimlaneManager.prototype.setResizeEnabled = function(value)

Sets resizeEnabled.

getGraph

mxSwimlaneManager.prototype.getGraph = function()

Returns the graph that this manager operates on.

setGraph

mxSwimlaneManager.prototype.setGraph = function(graph)

Sets the graph that the manager operates on.

isSwimlaneIgnored

mxSwimlaneManager.prototype.isSwimlaneIgnored = function(swimlane)

Returns true if the given swimlane should be ignored.

isCellHorizontal

mxSwimlaneManager.prototype.isCellHorizontal = function(cell)

Returns true if the given cell is horizontal.  If the given cell is not a swimlane, then the global orientation is returned.

cellsAdded

mxSwimlaneManager.prototype.cellsAdded = function(cells)

Called if any cells have been added.

Parameters

cellArray of mxCells that have been added.

swimlaneAdded

mxSwimlaneManager.prototype.swimlaneAdded = function(swimlane)

Updates the size of the given swimlane to match that of any existing siblings swimlanes.

Parameters

swimlanemxCell that represents the new swimlane.

cellsResized

mxSwimlaneManager.prototype.cellsResized = function(cells)

Called if any cells have been resizes.  Calls <swimlaneResized> for all swimlanes where isSwimlaneIgnored returns false.

Parameters

cellsArray of mxCells whose size was changed.

resizeSwimlane

mxSwimlaneManager.prototype.resizeSwimlane = function(swimlane,
w,
h,
parentHorizontal)

Called from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if <bubbling> is true.

Parameters

swimlanemxCell whose size has changed.

destroy

mxSwimlaneManager.prototype.destroy = function()

Removes all handlers from the graph and deletes the reference to it.

mxTemporaryCellStates

Creates a temporary set of cell states.

Summary
Variables
viewHolds the width of the rectangle.
oldStatesHolds the height of the rectangle.
oldBoundsHolds the height of the rectangle.
oldScaleHolds the height of the rectangle.
Functions
destroyReturns the top, left corner as a new mxPoint.

Variables

view

mxTemporaryCellStates.prototype.view

Holds the width of the rectangle.  Default is 0.

oldStates

mxTemporaryCellStates.prototype.oldStates

Holds the height of the rectangle.  Default is 0.

oldBounds

mxTemporaryCellStates.prototype.oldBounds

Holds the height of the rectangle.  Default is 0.

oldScale

mxTemporaryCellStates.prototype.oldScale

Holds the height of the rectangle.  Default is 0.

Functions

destroy

mxTemporaryCellStates.prototype.destroy = function()

Returns the top, left corner as a new mxPoint.

mxCellStatePreview

Implements a live preview for moving cells.

Summary
Functions
mxCellStatePreviewConstructs a move preview for the given graph.
Variables
graphReference to the enclosing mxGraph.
deltasReference to the enclosing mxGraph.
countContains the number of entries in the map.
Functions
isEmptyReturns true if this contains no entries.
moveState
show
translateState
revalidateState
addEdges

Functions

mxCellStatePreview

function mxCellStatePreview(graph)

Constructs a move preview for the given graph.

Parameters

graphReference to the enclosing mxGraph.

Variables

graph

mxCellStatePreview.prototype.graph

Reference to the enclosing mxGraph.

deltas

mxCellStatePreview.prototype.deltas

Reference to the enclosing mxGraph.

count

mxCellStatePreview.prototype.count

Contains the number of entries in the map.

Functions

isEmpty

mxCellStatePreview.prototype.isEmpty = function()

Returns true if this contains no entries.

moveState

mxCellStatePreview.prototype.moveState = function(state,
dx,
dy,
add,
includeEdges)

show

mxCellStatePreview.prototype.show = function(visitor)

translateState

mxCellStatePreview.prototype.translateState = function(state,
dx,
dy)

revalidateState

mxCellStatePreview.prototype.revalidateState = function(state,
dx,
dy,
visitor)

addEdges

mxCellStatePreview.prototype.addEdges = function(state)

mxConnectionConstraint

Defines an object that contains the constraints about how to connect one side of an edge to its terminal.

Summary
Functions
mxConnectionConstraintConstructs a new connection constraint for the given point and boolean arguments.
Variables
pointmxPoint that specifies the fixed location of the connection point.
perimeterBoolean that specifies if the point should be projected onto the perimeter of the terminal.
nameOptional string that specifies the name of the constraint.
dxOptional float that specifies the horizontal offset of the constraint.
dyOptional float that specifies the vertical offset of the constraint.

Functions

mxConnectionConstraint

function mxConnectionConstraint(point,
perimeter,
name,
dx,
dy)

Constructs a new connection constraint for the given point and boolean arguments.

Parameters

pointOptional mxPoint that specifies the fixed location of the point in relative coordinates.  Default is null.
perimeterOptional boolean that specifies if the fixed point should be projected onto the perimeter of the terminal.  Default is true.

Variables

point

mxConnectionConstraint.prototype.point

mxPoint that specifies the fixed location of the connection point.

perimeter

mxConnectionConstraint.prototype.perimeter

Boolean that specifies if the point should be projected onto the perimeter of the terminal.

name

mxConnectionConstraint.prototype.name

Optional string that specifies the name of the constraint.

dx

mxConnectionConstraint.prototype.dx

Optional float that specifies the horizontal offset of the constraint.

dy

mxConnectionConstraint.prototype.dy

Optional float that specifies the vertical offset of the constraint.

mxGraphHandler

Graph event handler that handles selection.  Individual cells are handled separately using mxVertexHandler or one of the edge handlers.  These handlers are created using mxGraph.createHandler in mxGraphSelectionModel.cellAdded.

To avoid the container to scroll a moved cell into view, set <scrollAfterMove> to false.

Summary
Functions
mxGraphHandlerConstructs an event handler that creates handles for the selection cells.
Variables
graphReference to the enclosing mxGraph.
maxCellsDefines the maximum number of cells to paint subhandles for.
enabledSpecifies if events are handled.
highlightEnabledSpecifies if drop targets under the mouse should be enabled.
cloneEnabledSpecifies if cloning by control-drag is enabled.
moveEnabledSpecifies if moving is enabled.
guidesEnabledSpecifies if other cells should be used for snapping the right, center or left side of the current selection.
guideHolds the mxGuide instance that is used for alignment.
currentDxStores the x-coordinate of the current mouse move.
currentDyStores the y-coordinate of the current mouse move.
updateCursorSpecifies if a move cursor should be shown if the mouse is over a movable cell.
selectEnabledSpecifies if selecting is enabled.
removeCellsFromParentSpecifies if cells may be moved out of their parents.
removeEmptyParentsIf empty parents should be removed from the model after all child cells have been moved out.
connectOnDropSpecifies if drop events are interpreted as new connections if no other drop action is defined.
scrollOnMoveSpecifies if the view should be scrolled so that a moved cell is visible.
minimumSizeSpecifies the minimum number of pixels for the width and height of a selection border.
previewColorSpecifies the color of the preview shape.
htmlPreviewSpecifies if the graph container should be used for preview.
shapeReference to the mxShape that represents the preview.
scaleGridSpecifies if the grid should be scaled.
rotationEnabledSpecifies if the bounding box should allow for rotation.
Functions
isEnabledReturns enabled.
setEnabledSets enabled.
isCloneEnabledReturns cloneEnabled.
setCloneEnabledSets cloneEnabled.
isMoveEnabledReturns moveEnabled.
setMoveEnabledSets moveEnabled.
isSelectEnabledReturns selectEnabled.
setSelectEnabledSets selectEnabled.
isRemoveCellsFromParentReturns removeCellsFromParent.
setRemoveCellsFromParentSets removeCellsFromParent.
getInitialCellForEventHook to return initial cell for the given event.
isDelayedSelectionHook to return true for delayed selections.
consumeMouseEventConsumes the given mouse event.
mouseDownHandles the event by selecing the given cell and creating a handle for it.
getGuideStatesCreates an array of cell states which should be used as guides.
getCellsReturns the cells to be modified by this handler.
getPreviewBoundsReturns the mxRectangle used as the preview bounds for moving the given cells.
getBoundingBoxReturns the union of the mxCellStates for the given array of mxCells.
createPreviewShapeCreates the shape used to draw the preview for the given bounds.
startStarts the handling of the mouse gesture.
useGuidesForEventReturns true if the guides should be used for the given mxMouseEvent.
snapSnaps the given vector to the grid and returns the given mxPoint instance.
getDeltaReturns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundLengthHook for rounding the unscaled vector.
mouseMoveHandles the event by highlighting possible drop targets and updating the preview.
updatePreviewShapeUpdates the bounds of the preview shape.
setHighlightColorSets the color of the rectangle used to highlight drop targets.
mouseUpHandles the event by applying the changes to the selection cells.
selectDelayedImplements the delayed selection for the given mouse event.
resetResets the state of this handler.
shouldRemoveCellsFromParentReturns true if the given cells should be removed from the parent for the specified mousereleased event.
moveCellsMoves the given cells by the specified amount.
moveCellsMoves the given cells by the specified amount.
destroyShapesDestroy the preview and highlight shapes.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxGraphHandler

function mxGraphHandler(graph)

Constructs an event handler that creates handles for the selection cells.

Parameters

graphReference to the enclosing mxGraph.

Variables

graph

mxGraphHandler.prototype.graph

Reference to the enclosing mxGraph.

maxCells

mxGraphHandler.prototype.maxCells

Defines the maximum number of cells to paint subhandles for.  Default is 50 for Firefox and 20 for IE.  Set this to 0 if you want an unlimited number of handles to be displayed.  This is only recommended if the number of cells in the graph is limited to a small number, eg.  500.

enabled

mxGraphHandler.prototype.enabled

Specifies if events are handled.  Default is true.

highlightEnabled

mxGraphHandler.prototype.highlightEnabled

Specifies if drop targets under the mouse should be enabled.  Default is true.

cloneEnabled

mxGraphHandler.prototype.cloneEnabled

Specifies if cloning by control-drag is enabled.  Default is true.

moveEnabled

mxGraphHandler.prototype.moveEnabled

Specifies if moving is enabled.  Default is true.

guidesEnabled

mxGraphHandler.prototype.guidesEnabled

Specifies if other cells should be used for snapping the right, center or left side of the current selection.  Default is false.

guide

mxGraphHandler.prototype.guide

Holds the mxGuide instance that is used for alignment.

currentDx

mxGraphHandler.prototype.currentDx

Stores the x-coordinate of the current mouse move.

currentDy

mxGraphHandler.prototype.currentDy

Stores the y-coordinate of the current mouse move.

updateCursor

mxGraphHandler.prototype.updateCursor

Specifies if a move cursor should be shown if the mouse is over a movable cell.  Default is true.

selectEnabled

mxGraphHandler.prototype.selectEnabled

Specifies if selecting is enabled.  Default is true.

removeCellsFromParent

mxGraphHandler.prototype.removeCellsFromParent

Specifies if cells may be moved out of their parents.  Default is true.

removeEmptyParents

mxGraphHandler.prototype.removeEmptyParents

If empty parents should be removed from the model after all child cells have been moved out.  Default is true.

connectOnDrop

mxGraphHandler.prototype.connectOnDrop

Specifies if drop events are interpreted as new connections if no other drop action is defined.  Default is false.

scrollOnMove

mxGraphHandler.prototype.scrollOnMove

Specifies if the view should be scrolled so that a moved cell is visible.  Default is true.

minimumSize

mxGraphHandler.prototype.minimumSize

Specifies the minimum number of pixels for the width and height of a selection border.  Default is 6.

previewColor

mxGraphHandler.prototype.previewColor

Specifies the color of the preview shape.  Default is black.

htmlPreview

mxGraphHandler.prototype.htmlPreview

Specifies if the graph container should be used for preview.  If this is used then drop target detection relies entirely on mxGraph.getCellAt because the HTML preview does not “let events through”.  Default is false.

shape

mxGraphHandler.prototype.shape

Reference to the mxShape that represents the preview.

scaleGrid

mxGraphHandler.prototype.scaleGrid

Specifies if the grid should be scaled.  Default is false.

rotationEnabled

mxGraphHandler.prototype.rotationEnabled

Specifies if the bounding box should allow for rotation.  Default is true.

Functions

isEnabled

mxGraphHandler.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxGraphHandler.prototype.setEnabled = function(value)

Sets enabled.

isCloneEnabled

mxGraphHandler.prototype.isCloneEnabled = function()

Returns cloneEnabled.

setCloneEnabled

mxGraphHandler.prototype.setCloneEnabled = function(value)

Sets cloneEnabled.

Parameters

valueBoolean that specifies the new clone enabled state.

isMoveEnabled

mxGraphHandler.prototype.isMoveEnabled = function()

Returns moveEnabled.

setMoveEnabled

mxGraphHandler.prototype.setMoveEnabled = function(value)

Sets moveEnabled.

isSelectEnabled

mxGraphHandler.prototype.isSelectEnabled = function()

Returns selectEnabled.

setSelectEnabled

mxGraphHandler.prototype.setSelectEnabled = function(value)

Sets selectEnabled.

isRemoveCellsFromParent

mxGraphHandler.prototype.isRemoveCellsFromParent = function()

Returns removeCellsFromParent.

setRemoveCellsFromParent

mxGraphHandler.prototype.setRemoveCellsFromParent = function(value)

Sets removeCellsFromParent.

getInitialCellForEvent

mxGraphHandler.prototype.getInitialCellForEvent = function(me)

Hook to return initial cell for the given event.

isDelayedSelection

mxGraphHandler.prototype.isDelayedSelection = function(cell,
me)

Hook to return true for delayed selections.

consumeMouseEvent

mxGraphHandler.prototype.consumeMouseEvent = function(evtName,
me)

Consumes the given mouse event.  NOTE: This may be used to enable click events for links in labels on iOS as follows as consuming the initial touchStart disables firing the subsequent click event on the link.

<code> mxGraphHandler.prototype.consumeMouseEvent = function(evtName, me) { var source = mxEvent.getSource(me.getEvent());

if (!mxEvent.isTouchEvent(me.getEvent()) || source.nodeName != ‘A’) { me.consume(); } } </code>

mouseDown

mxGraphHandler.prototype.mouseDown = function(sender,
me)

Handles the event by selecing the given cell and creating a handle for it.  By consuming the event all subsequent events of the gesture are redirected to this handler.

getGuideStates

mxGraphHandler.prototype.getGuideStates = function()

Creates an array of cell states which should be used as guides.

getCells

mxGraphHandler.prototype.getCells = function(initialCell)

Returns the cells to be modified by this handler.  This implementation returns all selection cells that are movable, or the given initial cell if the given cell is not selected and movable.  This handles the case of moving unselectable or unselected cells.

Parameters

initialCellmxCell that triggered this handler.

getPreviewBounds

mxGraphHandler.prototype.getPreviewBounds = function(cells)

Returns the mxRectangle used as the preview bounds for moving the given cells.

getBoundingBox

mxGraphHandler.prototype.getBoundingBox = function(cells)

Returns the union of the mxCellStates for the given array of mxCells.  For vertices, this method uses the bounding box of the corresponding shape if one exists.  The bounding box of the corresponding text label and all controls and overlays are ignored.  See also: mxGraphView.getBounds and mxGraph.getBoundingBox.

Parameters

cellsArray of mxCells whose bounding box should be returned.

createPreviewShape

mxGraphHandler.prototype.createPreviewShape = function(bounds)

Creates the shape used to draw the preview for the given bounds.

start

mxGraphHandler.prototype.start = function(cell,
x,
y)

Starts the handling of the mouse gesture.

useGuidesForEvent

mxGraphHandler.prototype.useGuidesForEvent = function(me)

Returns true if the guides should be used for the given mxMouseEvent.  This implementation returns mxGuide.isEnabledForEvent.

snap

mxGraphHandler.prototype.snap = function(vector)

Snaps the given vector to the grid and returns the given mxPoint instance.

getDelta

mxGraphHandler.prototype.getDelta = function(me)

Returns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.

updateHint

mxGraphHandler.prototype.updateHint = function(me)

Hook for subclassers do show details while the handler is active.

removeHint

mxGraphHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundLength

mxGraphHandler.prototype.roundLength = function(length)

Hook for rounding the unscaled vector.  This uses Math.round.

mouseMove

mxGraphHandler.prototype.mouseMove = function(sender,
me)

Handles the event by highlighting possible drop targets and updating the preview.

updatePreviewShape

mxGraphHandler.prototype.updatePreviewShape = function()

Updates the bounds of the preview shape.

setHighlightColor

mxGraphHandler.prototype.setHighlightColor = function(color)

Sets the color of the rectangle used to highlight drop targets.

Parameters

colorString that represents the new highlight color.

mouseUp

mxGraphHandler.prototype.mouseUp = function(sender,
me)

Handles the event by applying the changes to the selection cells.

selectDelayed

mxGraphHandler.prototype.selectDelayed = function(me)

Implements the delayed selection for the given mouse event.

reset

mxGraphHandler.prototype.reset = function()

Resets the state of this handler.

shouldRemoveCellsFromParent

mxGraphHandler.prototype.shouldRemoveCellsFromParent = function(parent,
cells,
evt)

Returns true if the given cells should be removed from the parent for the specified mousereleased event.

moveCells

mxGraphHandler.prototype.moveCells = function(cells,
dx,
dy,
clone,
target,
evt)

Moves the given cells by the specified amount.

moveCells

Moves the given cells by the specified amount.

destroyShapes

mxGraphHandler.prototype.destroyShapes = function()

Destroy the preview and highlight shapes.

destroy

mxGraphHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxPanningHandler

Event handler that pans and creates popupmenus.  To use the left mousebutton for panning without interfering with cell moving and resizing, use <isUseLeftButton> and <isIgnoreCell>.  For grid size steps while panning, use useGrid.  This handler is built-into <mxGraph.panningHandler> and enabled using mxGraph.setPanning.

Summary
Functions
mxPanningHandlerConstructs an event handler that creates a mxPopupMenu and pans the graph.
Events
mxEvent.PAN_STARTFires when the panning handler changes its <active> state to true.
mxEvent.PANFires while handle is processing events.
mxEvent.PAN_ENDFires when the panning handler changes its <active> state to false.
Variables
graphReference to the enclosing mxGraph.
useLeftButtonForPanningSpecifies if panning should be active for the left mouse button.
usePopupTriggerSpecifies if mxEvent.isPopupTrigger should also be used for panning.
ignoreCellSpecifies if panning should be active even if there is a cell under the mousepointer.
previewEnabledSpecifies if the panning should be previewed.
useGridSpecifies if the panning steps should be aligned to the grid size.
panningEnabledSpecifies if panning should be enabled.
pinchEnabledSpecifies if pinch gestures should be handled as zoom.
maxScaleSpecifies the maximum scale.
minScaleSpecifies the minimum scale.
dxHolds the current horizontal offset.
dyHolds the current vertical offset.
startXHolds the x-coordinate of the start point.
startYHolds the y-coordinate of the start point.
Functions
isActiveReturns true if the handler is currently active.
isPanningEnabledReturns panningEnabled.
setPanningEnabledSets panningEnabled.
isPinchEnabledReturns pinchEnabled.
setPinchEnabledSets pinchEnabled.
isPanningTriggerReturns true if the given event is a panning trigger for the optional given cell.
isForcePanningEventReturns true if the given mxMouseEvent should start panning.
mouseDownHandles the event by initiating the panning.
startStarts panning at the given event.
consumePanningTriggerConsumes the given mxMouseEvent if it was a panning trigger in mouseDown.
mouseMoveHandles the event by updating the panning on the graph.
mouseUpHandles the event by setting the translation on the view or showing the popupmenu.
mouseUpHandles the event by setting the translation on the view or showing the popupmenu.
panGraphPans graph by the given amount.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxPanningHandler

Constructs an event handler that creates a mxPopupMenu and pans the graph.

Events

mxEvent.PAN_START

Fires when the panning handler changes its <active> state to true.  The <code>event</code> property contains the corresponding mxMouseEvent.

mxEvent.PAN

Fires while handle is processing events.  The <code>event</code> property contains the corresponding mxMouseEvent.

mxEvent.PAN_END

Fires when the panning handler changes its <active> state to false.  The <code>event</code> property contains the corresponding mxMouseEvent.

Variables

graph

mxPanningHandler.prototype.graph

Reference to the enclosing mxGraph.

useLeftButtonForPanning

mxPanningHandler.prototype.useLeftButtonForPanning

Specifies if panning should be active for the left mouse button.  Setting this to true may conflict with mxRubberband.  Default is false.

usePopupTrigger

mxPanningHandler.prototype.usePopupTrigger

Specifies if mxEvent.isPopupTrigger should also be used for panning.

ignoreCell

mxPanningHandler.prototype.ignoreCell

Specifies if panning should be active even if there is a cell under the mousepointer.  Default is false.

previewEnabled

mxPanningHandler.prototype.previewEnabled

Specifies if the panning should be previewed.  Default is true.

useGrid

mxPanningHandler.prototype.useGrid

Specifies if the panning steps should be aligned to the grid size.  Default is false.

panningEnabled

mxPanningHandler.prototype.panningEnabled

Specifies if panning should be enabled.  Default is true.

pinchEnabled

mxPanningHandler.prototype.pinchEnabled

Specifies if pinch gestures should be handled as zoom.  Default is true.

maxScale

mxPanningHandler.prototype.maxScale

Specifies the maximum scale.  Default is 8.

minScale

mxPanningHandler.prototype.minScale

Specifies the minimum scale.  Default is 0.01.

dx

mxPanningHandler.prototype.dx

Holds the current horizontal offset.

dy

mxPanningHandler.prototype.dy

Holds the current vertical offset.

startX

mxPanningHandler.prototype.startX

Holds the x-coordinate of the start point.

startY

mxPanningHandler.prototype.startY

Holds the y-coordinate of the start point.

Functions

isActive

mxPanningHandler.prototype.isActive = function()

Returns true if the handler is currently active.

isPanningEnabled

mxPanningHandler.prototype.isPanningEnabled = function()

Returns panningEnabled.

setPanningEnabled

mxPanningHandler.prototype.setPanningEnabled = function(value)

Sets panningEnabled.

isPinchEnabled

mxPanningHandler.prototype.isPinchEnabled = function()

Returns pinchEnabled.

setPinchEnabled

mxPanningHandler.prototype.setPinchEnabled = function(value)

Sets pinchEnabled.

isPanningTrigger

mxPanningHandler.prototype.isPanningTrigger = function(me)

Returns true if the given event is a panning trigger for the optional given cell.  This returns true if control-shift is pressed or if usePopupTrigger is true and the event is a popup trigger.

isForcePanningEvent

mxPanningHandler.prototype.isForcePanningEvent = function(me)

Returns true if the given mxMouseEvent should start panning.  This implementation always returns true if ignoreCell is true or for multi touch events.

mouseDown

mxPanningHandler.prototype.mouseDown = function(sender,
me)

Handles the event by initiating the panning.  By consuming the event all subsequent events of the gesture are redirected to this handler.

start

mxPanningHandler.prototype.start = function(me)

Starts panning at the given event.

consumePanningTrigger

mxPanningHandler.prototype.consumePanningTrigger = function(me)

Consumes the given mxMouseEvent if it was a panning trigger in mouseDown.  The default is to invoke mxMouseEvent.consume.  Note that this will block any further event processing.  If you haven’t disabled built-in context menus and require immediate selection of the cell on mouseDown in Safari and/or on the Mac, then use the following code:

mxPanningHandler.prototype.consumePanningTrigger = function(me)
{
  if (me.evt.preventDefault)
  {
    me.evt.preventDefault();
  }

  // Stops event processing in IE
  me.evt.returnValue = false;

  // Sets local consumed state
  if (!mxClient.IS_SF && !mxClient.IS_MAC)
  {
    me.consumed = true;
  }
};

mouseMove

mxPanningHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the panning on the graph.

mouseUp

mxPanningHandler.prototype.mouseUp = function(sender,
me)

Handles the event by setting the translation on the view or showing the popupmenu.

mouseUp

Handles the event by setting the translation on the view or showing the popupmenu.

panGraph

mxPanningHandler.prototype.panGraph = function(dx,
dy)

Pans graph by the given amount.

destroy

mxPanningHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxPopupMenuHandler

Event handler that creates popupmenus.

Summary
Functions
mxPopupMenuHandlerConstructs an event handler that creates a mxPopupMenu.
Variables
graphReference to the enclosing mxGraph.
selectOnPopupSpecifies if cells should be selected if a popupmenu is displayed for them.
clearSelectionOnBackgroundSpecifies if cells should be deselected if a popupmenu is displayed for the diagram background.
triggerXX-coordinate of the mouse down event.
triggerYY-coordinate of the mouse down event.
screenXScreen X-coordinate of the mouse down event.
screenYScreen Y-coordinate of the mouse down event.
Functions
initInitializes the shapes required for this vertex handler.
isSelectOnPopupHook for returning if a cell should be selected for a given mxMouseEvent.
mouseDownHandles the event by initiating the panning.
mouseMoveHandles the event by updating the panning on the graph.
mouseUpHandles the event by setting the translation on the view or showing the popupmenu.
getCellForPopupEventHook to return the cell for the mouse up popup trigger handling.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxPopupMenuHandler

function mxPopupMenuHandler(graph,
factoryMethod)

Constructs an event handler that creates a mxPopupMenu.

Variables

graph

mxPopupMenuHandler.prototype.graph

Reference to the enclosing mxGraph.

selectOnPopup

mxPopupMenuHandler.prototype.selectOnPopup

Specifies if cells should be selected if a popupmenu is displayed for them.  Default is true.

clearSelectionOnBackground

mxPopupMenuHandler.prototype.clearSelectionOnBackground

Specifies if cells should be deselected if a popupmenu is displayed for the diagram background.  Default is true.

triggerX

mxPopupMenuHandler.prototype.triggerX

X-coordinate of the mouse down event.

triggerY

mxPopupMenuHandler.prototype.triggerY

Y-coordinate of the mouse down event.

screenX

mxPopupMenuHandler.prototype.screenX

Screen X-coordinate of the mouse down event.

screenY

mxPopupMenuHandler.prototype.screenY

Screen Y-coordinate of the mouse down event.

Functions

init

mxPopupMenuHandler.prototype.init = function()

Initializes the shapes required for this vertex handler.

isSelectOnPopup

mxPopupMenuHandler.prototype.isSelectOnPopup = function(me)

Hook for returning if a cell should be selected for a given mxMouseEvent.  This implementation returns selectOnPopup.

mouseDown

mxPopupMenuHandler.prototype.mouseDown = function(sender,
me)

Handles the event by initiating the panning.  By consuming the event all subsequent events of the gesture are redirected to this handler.

mouseMove

mxPopupMenuHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the panning on the graph.

mouseUp

mxPopupMenuHandler.prototype.mouseUp = function(sender,
me)

Handles the event by setting the translation on the view or showing the popupmenu.

getCellForPopupEvent

mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me)

Hook to return the cell for the mouse up popup trigger handling.

destroy

mxPopupMenuHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxCellMarker

A helper class to process mouse locations and highlight cells.

Helper class to highlight cells.  To add a cell marker to an existing graph for highlighting all cells, the following code is used:

var marker = new mxCellMarker(graph);
graph.addMouseListener({
  mouseDown: function() {},
  mouseMove: function(sender, me)
  {
    marker.process(me);
  },
  mouseUp: function() {}
});
Summary
Events
mxEvent.MARKFires after a cell has been marked or unmarked.
Functions
mxCellMarkerConstructs a new cell marker.
Variables
graphReference to the enclosing mxGraph.
enabledSpecifies if the marker is enabled.
hotspotSpecifies the portion of the width and height that should trigger a highlight.
hotspotEnabledSpecifies if the hotspot is enabled.
validColorHolds the valid marker color.
invalidColorHolds the invalid marker color.
currentColorHolds the current marker color.
validStateHolds the marked mxCellState if it is valid.
markedStateHolds the marked mxCellState.
Functions
setEnabledEnables or disables event handling.
isEnabledReturns true if events are handled.
setHotspotSets the hotspot.
getHotspotReturns the hotspot.
setHotspotEnabledSpecifies whether the hotspot should be used in intersects.
isHotspotEnabledReturns true if hotspot is used in intersects.
hasValidStateReturns true if validState is not null.
getValidStateReturns the validState.
getMarkedStateReturns the markedState.
resetResets the state of the cell marker.
processProcesses the given event and cell and marks the state returned by getState with the color returned by getMarkerColor.
setCurrentStateSets and marks the current valid state.
markCellMarks the given cell using the given color, or validColor if no color is specified.
markMarks the markedState and fires a mark event.
unmarkHides the marker and fires a mark event.
isValidStateReturns true if the given mxCellState is a valid state.
getMarkerColorReturns the valid- or invalidColor depending on the value of isValid.
getStateUses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.
getCellReturns the mxCell for the given event and cell.
getStateToMarkReturns the mxCellState to be marked for the given mxCellState under the mouse.
intersectsReturns true if the given coordinate pair intersects the given state.
destroyDestroys the handler and all its resources and DOM nodes.

Events

mxEvent.MARK

Fires after a cell has been marked or unmarked.  The <code>state</code> property contains the marked mxCellState or null if no state is marked.

Functions

mxCellMarker

function mxCellMarker(graph,
validColor,
invalidColor,
hotspot)

Constructs a new cell marker.

Parameters

graphReference to the enclosing mxGraph.
validColorOptional marker color for valid states.  Default is mxConstants.DEFAULT_VALID_COLOR.
invalidColorOptional marker color for invalid states.  Default is mxConstants.DEFAULT_INVALID_COLOR.
hotspotPortion of the width and hight where a state intersects a given coordinate pair.  A value of 0 means always highlight.  Default is mxConstants.DEFAULT_HOTSPOT.

Variables

graph

mxCellMarker.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxCellMarker.prototype.enabled

Specifies if the marker is enabled.  Default is true.

hotspot

mxCellMarker.prototype.hotspot

Specifies the portion of the width and height that should trigger a highlight.  The area around the center of the cell to be marked is used as the hotspot.  Possible values are between 0 and 1.  Default is mxConstants.DEFAULT_HOTSPOT.

hotspotEnabled

mxCellMarker.prototype.hotspotEnabled

Specifies if the hotspot is enabled.  Default is false.

validColor

mxCellMarker.prototype.validColor

Holds the valid marker color.

invalidColor

mxCellMarker.prototype.invalidColor

Holds the invalid marker color.

currentColor

mxCellMarker.prototype.currentColor

Holds the current marker color.

validState

mxCellMarker.prototype.validState

Holds the marked mxCellState if it is valid.

markedState

mxCellMarker.prototype.markedState

Holds the marked mxCellState.

Functions

setEnabled

mxCellMarker.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

Parameters

enabledBoolean that specifies the new enabled state.

isEnabled

mxCellMarker.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setHotspot

mxCellMarker.prototype.setHotspot = function(hotspot)

Sets the hotspot.

getHotspot

mxCellMarker.prototype.getHotspot = function()

Returns the hotspot.

setHotspotEnabled

mxCellMarker.prototype.setHotspotEnabled = function(enabled)

Specifies whether the hotspot should be used in intersects.

isHotspotEnabled

mxCellMarker.prototype.isHotspotEnabled = function()

Returns true if hotspot is used in intersects.

hasValidState

mxCellMarker.prototype.hasValidState = function()

Returns true if validState is not null.

getValidState

mxCellMarker.prototype.getValidState = function()

Returns the validState.

getMarkedState

mxCellMarker.prototype.getMarkedState = function()

Returns the markedState.

reset

mxCellMarker.prototype.reset = function()

Resets the state of the cell marker.

process

mxCellMarker.prototype.process = function(me)

Processes the given event and cell and marks the state returned by getState with the color returned by getMarkerColor.  If the markerColor is not null, then the state is stored in markedState.  If isValidState returns true, then the state is stored in validState regardless of the marker color.  The state is returned regardless of the marker color and valid state.

setCurrentState

mxCellMarker.prototype.setCurrentState = function(state,
me,
color)

Sets and marks the current valid state.

markCell

mxCellMarker.prototype.markCell = function(cell,
color)

Marks the given cell using the given color, or validColor if no color is specified.

mark

mxCellMarker.prototype.mark = function()

Marks the markedState and fires a mark event.

unmark

mxCellMarker.prototype.unmark = function()

Hides the marker and fires a mark event.

isValidState

mxCellMarker.prototype.isValidState = function(state)

Returns true if the given mxCellState is a valid state.  If this returns true, then the state is stored in validState.  The return value of this method is used as the argument for getMarkerColor.

getMarkerColor

mxCellMarker.prototype.getMarkerColor = function(evt,
state,
isValid)

Returns the valid- or invalidColor depending on the value of isValid.  The given mxCellState is ignored by this implementation.

getState

mxCellMarker.prototype.getState = function(me)

Uses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.

getCell

mxCellMarker.prototype.getCell = function(me)

Returns the mxCell for the given event and cell.  This returns the given cell.

getStateToMark

mxCellMarker.prototype.getStateToMark = function(state)

Returns the mxCellState to be marked for the given mxCellState under the mouse.  This returns the given state.

intersects

mxCellMarker.prototype.intersects = function(state,
me)

Returns true if the given coordinate pair intersects the given state.  This returns true if the hotspot is 0 or the coordinates are inside the hotspot for the given cell state.

destroy

mxCellMarker.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxSelectionCellsHandler

An event handler that manages cell handlers and invokes their mouse event processing functions.

Summary
Events
mxEvent.ADDFires if a cell has been added to the selection.
mxEvent.REMOVEFires if a cell has been remove from the selection.
graphReference to the enclosing mxGraph.
enabledSpecifies if events are handled.
refreshHandlerKeeps a reference to an event listener for later removal.
maxHandlersDefines the maximum number of handlers to paint individually.
handlersmxDictionary that maps from cells to handlers.
isEnabledReturns enabled.
setEnabledSets enabled.
getHandlerReturns the handler for the given cell.
resetResets all handlers.
refreshReloads or updates all handlers.
isHandlerActiveReturns true if the given handler is active and should not be redrawn.
updateHandlerUpdates the handler for the given shape if one exists.
mouseDownRedirects the given event to the handlers.
mouseMoveRedirects the given event to the handlers.
mouseUpRedirects the given event to the handlers.
destroyDestroys the handler and all its resources and DOM nodes.

Events

mxEvent.ADD

Fires if a cell has been added to the selection.  The <code>state</code> property contains the mxCellState that has been added.

mxEvent.REMOVE

Fires if a cell has been remove from the selection.  The <code>state</code> property contains the mxCellState that has been removed.

Parameters

graphReference to the enclosing mxGraph.

graph

mxSelectionCellsHandler.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxSelectionCellsHandler.prototype.enabled

Specifies if events are handled.  Default is true.

refreshHandler

mxSelectionCellsHandler.prototype.refreshHandler

Keeps a reference to an event listener for later removal.

maxHandlers

mxSelectionCellsHandler.prototype.maxHandlers

Defines the maximum number of handlers to paint individually.  Default is 100.

handlers

mxSelectionCellsHandler.prototype.handlers

mxDictionary that maps from cells to handlers.

isEnabled

mxSelectionCellsHandler.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxSelectionCellsHandler.prototype.setEnabled = function(value)

Sets enabled.

getHandler

mxSelectionCellsHandler.prototype.getHandler = function(cell)

Returns the handler for the given cell.

reset

mxSelectionCellsHandler.prototype.reset = function()

Resets all handlers.

refresh

mxSelectionCellsHandler.prototype.refresh = function()

Reloads or updates all handlers.

isHandlerActive

mxSelectionCellsHandler.prototype.isHandlerActive = function(handler)

Returns true if the given handler is active and should not be redrawn.

updateHandler

mxSelectionCellsHandler.prototype.updateHandler = function(state)

Updates the handler for the given shape if one exists.

mouseDown

mxSelectionCellsHandler.prototype.mouseDown = function(sender,
me)

Redirects the given event to the handlers.

mouseMove

mxSelectionCellsHandler.prototype.mouseMove = function(sender,
me)

Redirects the given event to the handlers.

mouseUp

mxSelectionCellsHandler.prototype.mouseUp = function(sender,
me)

Redirects the given event to the handlers.

destroy

mxSelectionCellsHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxConnectionHandler

Graph event handler that creates new connections.  Uses <mxTerminalMarker> for finding and highlighting the source and target vertices and factoryMethod to create the edge instance.  This handler is built-into <mxGraph.connectionHandler> and enabled using mxGraph.setConnectable.

Example

new mxConnectionHandler(graph, function(source, target, style)
{
  edge = new mxCell('', new mxGeometry());
  edge.setEdge(true);
  edge.setStyle(style);
  edge.geometry.relative = true;
  return edge;
});

Here is an alternative solution that just sets a specific user object for new edges by overriding insertEdge.

mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)
{
  value = 'Test';

  return mxConnectionHandlerInsertEdge.apply(this, arguments);
};

Using images to trigger connections

This handler uses mxTerminalMarker to find the source and target cell for the new connection and creates a new edge using connect.  The new edge is created using createEdge which in turn uses factoryMethod or creates a new default edge.

The handler uses a “highlight-paradigm” for indicating if a cell is being used as a source or target terminal, as seen in other diagramming products.  In order to allow both, moving and connecting cells at the same time, mxConstants.DEFAULT_HOTSPOT is used in the handler to determine the hotspot of a cell, that is, the region of the cell which is used to trigger a new connection.  The constant is a value between 0 and 1 that specifies the amount of the width and height around the center to be used for the hotspot of a cell and its default value is 0.5.  In addition, mxConstants.MIN_HOTSPOT_SIZE defines the minimum number of pixels for the width and height of the hotspot.

This solution, while standards compliant, may be somewhat confusing because there is no visual indicator for the hotspot and the highlight is seen to switch on and off while the mouse is being moved in and out.  Furthermore, this paradigm does not allow to create different connections depending on the highlighted hotspot as there is only one hotspot per cell and it normally does not allow cells to be moved and connected at the same time as there is no clear indication of the connectable area of the cell.

To come across these issues, the handle has an additional createIcons hook with a default implementation that allows to create one icon to be used to trigger new connections.  If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted.  The createIcons hook may be overridden to create more than one mxImageShape for creating new connections, but the default implementation supports one image and is used as follows:

In order to display the “connect image” whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:

mxConstants.DEFAULT_HOTSPOT = 1;

In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:

mxConstants.HIGHLIGHT_COLOR = null;

To install the image, the connectImage field of the mxConnectionHandler must be assigned a new mxImage instance:

mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);

This will use the green-dot.gif with a width and height of 14 pixels as the image to trigger new connections.  In createIcons the icon field of the handler will be set in order to remember the icon that has been clicked for creating the new connection.  This field will be available under selectedIcon in the connect method, which may be overridden to take the icon that triggered the new connection into account.  This is useful if more than one icon may be used to create a connection.

Summary
Events
mxEvent.STARTFires when a new connection is being created by the user.
mxEvent.CONNECTFires between begin- and endUpdate in connect.
mxEvent.RESETFires when the reset method is invoked.
mxConnectionHandlerConstructs an event handler that connects vertices using the specified factory method to create the new edges.
graphReference to the enclosing mxGraph.
factoryMethodFunction that is used for creating new edges.
moveIconFrontSpecifies if icons should be displayed inside the graph container instead of the overlay pane.
moveIconBackSpecifies if icons should be moved to the back of the overlay pane.
connectImagemxImage that is used to trigger the creation of a new connection.
targetConnectImageSpecifies if the connect icon should be centered on the target state while connections are being previewed.
enabledSpecifies if events are handled.
selectSpecifies if new edges should be selected.
createTargetSpecifies if createTargetVertex should be called if no target was under the mouse for the new connection.
markerHolds the <mxTerminalMarker> used for finding source and target cells.
constraintHandlerHolds the mxConstraintHandler used for drawing and highlighting constraints.
errorHolds the current validation error while connections are being created.
waypointsEnabledSpecifies if single clicks should add waypoints on the new edge.
ignoreMouseDownSpecifies if the connection handler should ignore the state of the mouse button when highlighting the source.
firstHolds the mxPoint where the mouseDown took place while the handler is active.
connectIconOffsetHolds the offset for connect icons during connection preview.
edgeStateOptional mxCellState that represents the preview edge while the handler is active.
changeHandlerHolds the change event listener for later removal.
drillHandlerHolds the drill event listener for later removal.
mouseDownCounterCounts the number of mouseDown events since the start.
movePreviewAwaySwitch to enable moving the preview away from the mousepointer.
outlineConnectSpecifies if connections to the outline of a highlighted target should be enabled.
livePreviewSpecifies if the actual shape of the edge state should be used for the preview.
cursorSpecifies the cursor to be used while the handler is active.
insertBeforeSourceSpecifies if new edges should be inserted before the source vertex in the cell hierarchy.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isInsertBeforeReturns insertBeforeSource for non-loops and false for loops.
isCreateTargetReturns createTarget.
setCreateTargetSets createTarget.
createShapeCreates the preview shape for new connections.
initInitializes the shapes required for this connection handler.
isConnectableCellReturns true if the given cell is connectable.
createMarkerCreates and returns the mxCellMarker used in marker.
startStarts a new connection for the given state and coordinates.
isConnectingReturns true if the source terminal has been clicked and a new connection is currently being previewed.
isValidSourceReturns mxGraph.isValidSource for the given source terminal.
isValidTargetReturns true.
validateConnectionReturns the error message or an empty string if the connection for the given source target pair is not valid.
getConnectImageHook to return the mxImage used for the connection icon of the given mxCellState.
isMoveIconToFrontForStateReturns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
createIconsCreates the array mxImageShapes that represent the connect icons for the given mxCellState.
redrawIconsRedraws the given array of mxImageShapes.
redrawIconsRedraws the given array of mxImageShapes.
destroyIconsDestroys the connect icons and resets the respective state.
isStartEventReturns true if the given mouse down event should start this handler.
mouseDownHandles the event by initiating a new connection.
isImmediateConnectSourceReturns true if a tap on the given source state should immediately start connecting.
createEdgeStateHook to return an mxCellState which may be used during the preview.
isOutlineConnectEventReturns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updateCurrentStateUpdates the current state for a given mouse move event by using the marker.
isCellEnabledReturns true if the given cell does not allow new connections to be created.
convertWaypointConverts the given point from screen coordinates to model coordinates.
snapToPreviewCalled to snap the given point to the current preview.
mouseMoveHandles the event by updating the preview edge or by highlighting a possible source or target terminal.
updateEdgeStateUpdates edgeState.
getTargetPerimeterPointReturns the perimeter point for the given target state.
getSourcePerimeterPointHook to update the icon position(s) based on a mouseOver event.
updateIconsHook to update the icon position(s) based on a mouseOver event.
isStopEventReturns true if the given mouse up event should stop this handler.
addWaypointAdds the waypoint for the given event to <waypoints>.
checkConstraintsReturns true if the connection for the given constraints is valid.
mouseUpHandles the event by inserting the new connection.
resetResets the state of this handler.
drawPreviewRedraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
getEdgeColorReturns the color used to draw the preview edge.
getEdgeColorReturns the color used to draw the preview edge.
getEdgeWidthReturns the width used to draw the preview edge.
connectConnects the given source and target using a new edge.
selectCellsSelects the given edge after adding a new connection.
insertEdgeCreates, inserts and returns the new edge for the given parameters.
createTargetVertexHook method for creating new vertices on the fly if no target was under the mouse.
getAlignmentToleranceReturns the tolerance for aligning new targets to sources.
createEdgeCreates and returns a new edge using factoryMethod if one exists.
destroyDestroys the handler and all its resources and DOM nodes.

Events

mxEvent.START

Fires when a new connection is being created by the user.  The <code>state</code> property contains the state of the source cell.

mxEvent.CONNECT

Fires between begin- and endUpdate in connect.  The <code>cell</code> property contains the inserted edge, the <code>event</code> and <code>target</code> properties contain the respective arguments that were passed to connect (where target corresponds to the dropTarget argument).  Finally, the <code>terminal</code> property corresponds to the target argument in connect or the clone of the source terminal if createTarget is enabled.

Note that the target is the cell under the mouse where the mouse button was released.  Depending on the logic in the handler, this doesn’t necessarily have to be the target of the inserted edge.  To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used.  To get more details about the actual connection point, mxGraph.getConnectionConstraint can be used.  To resolve the port IDs, use mxGraphModel.getCell.

graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
  var edge = evt.getProperty('cell');
  var source = graph.getModel().getTerminal(edge, true);
  var target = graph.getModel().getTerminal(edge, false);

  var style = graph.getCellStyle(edge);
  var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
  var targetPortId = style[mxConstants.STYLE_TARGET_PORT];

  mxLog.show();
  mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});

mxEvent.RESET

Fires when the reset method is invoked.

mxConnectionHandler

function mxConnectionHandler(graph,
factoryMethod)

Constructs an event handler that connects vertices using the specified factory method to create the new edges.  Modify <mxConstants.ACTIVE_REGION> to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.

Parameters

graphReference to the enclosing mxGraph.
factoryMethodOptional function to create the edge.  The function takes the source and target mxCell as the first and second argument and an optional cell style from the preview as the third argument.  It returns the mxCell that represents the new edge.

graph

mxConnectionHandler.prototype.graph

Reference to the enclosing mxGraph.

factoryMethod

mxConnectionHandler.prototype.factoryMethod

Function that is used for creating new edges.  The function takes the source and target mxCell as the first and second argument and returns a new mxCell that represents the edge.  This is used in createEdge.

moveIconFront

mxConnectionHandler.prototype.moveIconFront

Specifies if icons should be displayed inside the graph container instead of the overlay pane.  This is used for HTML labels on vertices which hide the connect icon.  This has precendence over moveIconBack when set to true.  Default is false.

moveIconBack

mxConnectionHandler.prototype.moveIconBack

Specifies if icons should be moved to the back of the overlay pane.  This can be set to true if the icons of the connection handler conflict with other handles, such as the vertex label move handle.  Default is false.

connectImage

mxConnectionHandler.prototype.connectImage

mxImage that is used to trigger the creation of a new connection.  This is used in createIcons.  Default is null.

targetConnectImage

mxConnectionHandler.prototype.targetConnectImage

Specifies if the connect icon should be centered on the target state while connections are being previewed.  Default is false.

enabled

mxConnectionHandler.prototype.enabled

Specifies if events are handled.  Default is true.

select

mxConnectionHandler.prototype.select

Specifies if new edges should be selected.  Default is true.

createTarget

mxConnectionHandler.prototype.createTarget

Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.  Setting this to true means the connection will be drawn as valid if no target is under the mouse, and createTargetVertex will be called before the connection is created between the source cell and the newly created vertex in createTargetVertex, which can be overridden to create a new target.  Default is false.

marker

mxConnectionHandler.prototype.marker

Holds the <mxTerminalMarker> used for finding source and target cells.

constraintHandler

mxConnectionHandler.prototype.constraintHandler

Holds the mxConstraintHandler used for drawing and highlighting constraints.

error

mxConnectionHandler.prototype.error

Holds the current validation error while connections are being created.

waypointsEnabled

mxConnectionHandler.prototype.waypointsEnabled

Specifies if single clicks should add waypoints on the new edge.  Default is false.

ignoreMouseDown

mxConnectionHandler.prototype.ignoreMouseDown

Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.  Default is false, that is, the handler only highlights the source if no button is being pressed.

first

mxConnectionHandler.prototype.first

Holds the mxPoint where the mouseDown took place while the handler is active.

connectIconOffset

mxConnectionHandler.prototype.connectIconOffset

Holds the offset for connect icons during connection preview.  Default is mxPoint(0, mxConstants.TOOLTIP_VERTICAL_OFFSET).  Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.

edgeState

mxConnectionHandler.prototype.edgeState

Optional mxCellState that represents the preview edge while the handler is active.  This is created in createEdgeState.

changeHandler

mxConnectionHandler.prototype.changeHandler

Holds the change event listener for later removal.

drillHandler

mxConnectionHandler.prototype.drillHandler

Holds the drill event listener for later removal.

mouseDownCounter

mxConnectionHandler.prototype.mouseDownCounter

Counts the number of mouseDown events since the start.  The initial mouse down event counts as 1.

movePreviewAway

mxConnectionHandler.prototype.movePreviewAway

Switch to enable moving the preview away from the mousepointer.  This is required in browsers where the preview cannot be made transparent to events and if the built-in hit detection on the HTML elements in the page should be used.  Default is the value of mxClient.IS_VML.

outlineConnect

mxConnectionHandler.prototype.outlineConnect

Specifies if connections to the outline of a highlighted target should be enabled.  This will allow to place the connection point along the outline of the highlighted target.  Default is false.

livePreview

mxConnectionHandler.prototype.livePreview

Specifies if the actual shape of the edge state should be used for the preview.  Default is false.  (Ignored if no edge state is created in createEdgeState.)

cursor

mxConnectionHandler.prototype.cursor

Specifies the cursor to be used while the handler is active.  Default is null.

insertBeforeSource

mxConnectionHandler.prototype.insertBeforeSource

Specifies if new edges should be inserted before the source vertex in the cell hierarchy.  Default is false for backwards compatibility.

isEnabled

mxConnectionHandler.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxConnectionHandler.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

Parameters

enabledBoolean that specifies the new enabled state.

isInsertBefore

mxConnectionHandler.prototype.isInsertBefore = function(edge,
source,
target,
evt,
dropTarget)

Returns insertBeforeSource for non-loops and false for loops.

Parameters

edgemxCell that represents the edge to be inserted.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
evtMousedown event of the connect gesture.
dropTargetmxCell that represents the cell under the mouse when it was released.

isCreateTarget

mxConnectionHandler.prototype.isCreateTarget = function(evt)

Returns createTarget.

Parameters

evtCurrent active native pointer event.

setCreateTarget

mxConnectionHandler.prototype.setCreateTarget = function(value)

Sets createTarget.

createShape

mxConnectionHandler.prototype.createShape = function()

Creates the preview shape for new connections.

init

mxConnectionHandler.prototype.init = function()

Initializes the shapes required for this connection handler.  This should be invoked if <mxGraph.container> is assigned after the connection handler has been created.

isConnectableCell

mxConnectionHandler.prototype.isConnectableCell = function(cell)

Returns true if the given cell is connectable.  This is a hook to disable floating connections.  This implementation returns true.

createMarker

mxConnectionHandler.prototype.createMarker = function()

Creates and returns the mxCellMarker used in marker.

start

mxConnectionHandler.prototype.start = function(state,
x,
y,
edgeState)

Starts a new connection for the given state and coordinates.

isConnecting

mxConnectionHandler.prototype.isConnecting = function()

Returns true if the source terminal has been clicked and a new connection is currently being previewed.

isValidSource

mxConnectionHandler.prototype.isValidSource = function(cell,
me)

Returns mxGraph.isValidSource for the given source terminal.

Parameters

cellmxCell that represents the source terminal.
memxMouseEvent that is associated with this call.

isValidTarget

mxConnectionHandler.prototype.isValidTarget = function(cell)

Returns true.  The call to mxGraph.isValidTarget is implicit by calling mxGraph.getEdgeValidationError in validateConnection.  This is an additional hook for disabling certain targets in this specific handler.

Parameters

cellmxCell that represents the target terminal.

validateConnection

mxConnectionHandler.prototype.validateConnection = function(source,
target)

Returns the error message or an empty string if the connection for the given source target pair is not valid.  Otherwise it returns null.  This implementation uses mxGraph.getEdgeValidationError.

Parameters

sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

getConnectImage

mxConnectionHandler.prototype.getConnectImage = function(state)

Hook to return the mxImage used for the connection icon of the given mxCellState.  This implementation returns connectImage.

Parameters

statemxCellState whose connect image should be returned.

isMoveIconToFrontForState

mxConnectionHandler.prototype.isMoveIconToFrontForState = function(state)

Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.

Parameters

statemxCellState whose connect icons should be returned.

createIcons

mxConnectionHandler.prototype.createIcons = function(state)

Creates the array mxImageShapes that represent the connect icons for the given mxCellState.

Parameters

statemxCellState whose connect icons should be returned.

redrawIcons

mxConnectionHandler.prototype.redrawIcons = function(icons,
state)

Redraws the given array of mxImageShapes.

Parameters

iconsOptional array of mxImageShapes to be redrawn.

redrawIcons

Redraws the given array of mxImageShapes.

Parameters

iconsOptional array of mxImageShapes to be redrawn.

destroyIcons

mxConnectionHandler.prototype.destroyIcons = function()

Destroys the connect icons and resets the respective state.

isStartEvent

mxConnectionHandler.prototype.isStartEvent = function(me)

Returns true if the given mouse down event should start this handler.  The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the constraintHandler are not null, or <previous> and error are not null and <icons> is null or <icons> and <icon> are not null.

mouseDown

mxConnectionHandler.prototype.mouseDown = function(sender,
me)

Handles the event by initiating a new connection.

isImmediateConnectSource

mxConnectionHandler.prototype.isImmediateConnectSource = function(state)

Returns true if a tap on the given source state should immediately start connecting.  This implementation returns true if the state is not movable in the graph.

createEdgeState

mxConnectionHandler.prototype.createEdgeState = function(me)

Hook to return an mxCellState which may be used during the preview.  This implementation returns null.

Use the following code to create a preview for an existing edge style

graph.connectionHandler.createEdgeState = function(me)
{
  var edge = graph.createEdge(null, null, null, null, null, 'edgeStyle=elbowEdgeStyle');

  return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};

isOutlineConnectEvent

mxConnectionHandler.prototype.isOutlineConnectEvent = function(me)

Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.

updateCurrentState

mxConnectionHandler.prototype.updateCurrentState = function(me,
point)

Updates the current state for a given mouse move event by using the marker.

isCellEnabled

mxConnectionHandler.prototype.isCellEnabled = function(cell)

Returns true if the given cell does not allow new connections to be created.

convertWaypoint

mxConnectionHandler.prototype.convertWaypoint = function(point)

Converts the given point from screen coordinates to model coordinates.

snapToPreview

mxConnectionHandler.prototype.snapToPreview = function(me,
point)

Called to snap the given point to the current preview.  This snaps to the first point of the preview if alt is not pressed.

mouseMove

mxConnectionHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the preview edge or by highlighting a possible source or target terminal.

updateEdgeState

mxConnectionHandler.prototype.updateEdgeState = function(current,
constraint)

Updates edgeState.

getTargetPerimeterPoint

mxConnectionHandler.prototype.getTargetPerimeterPoint = function(state,
me)

Returns the perimeter point for the given target state.

Parameters

statemxCellState that represents the target cell state.
memxMouseEvent that represents the mouse move.

getSourcePerimeterPoint

mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state,
next,
me)

Hook to update the icon position(s) based on a mouseOver event.  This is an empty implementation.

Parameters

statemxCellState that represents the target cell state.
nextmxPoint that represents the next point along the previewed edge.
memxMouseEvent that represents the mouse move.

updateIcons

mxConnectionHandler.prototype.updateIcons = function(state,
icons,
me)

Hook to update the icon position(s) based on a mouseOver event.  This is an empty implementation.

Parameters

statemxCellState under the mouse.
iconsArray of currently displayed icons.
memxMouseEvent that contains the mouse event.

isStopEvent

mxConnectionHandler.prototype.isStopEvent = function(me)

Returns true if the given mouse up event should stop this handler.  The connection will be created if error is null.  Note that this is only called if waypointsEnabled is true.  This implemtation returns true if there is a cell state in the given event.

addWaypoint

mxConnectionHandler.prototype.addWaypointForEvent = function(me)

Adds the waypoint for the given event to <waypoints>.

checkConstraints

mxConnectionHandler.prototype.checkConstraints = function(c1,
c2)

Returns true if the connection for the given constraints is valid.  This implementation returns true if the constraints are not pointing to the same fixed connection point.

mouseUp

mxConnectionHandler.prototype.mouseUp = function(sender,
me)

Handles the event by inserting the new connection.

reset

mxConnectionHandler.prototype.reset = function()

Resets the state of this handler.

drawPreview

mxConnectionHandler.prototype.drawPreview = function()

Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.

getEdgeColor

Returns the color used to draw the preview edge.  This returns green if there is no edge validation error and red otherwise.

Parameters

validBoolean indicating if the color for a valid edge should be returned.

getEdgeColor

mxConnectionHandler.prototype.getEdgeColor = function(valid)

Returns the color used to draw the preview edge.  This returns green if there is no edge validation error and red otherwise.

Parameters

validBoolean indicating if the color for a valid edge should be returned.

getEdgeWidth

mxConnectionHandler.prototype.getEdgeWidth = function(valid)

Returns the width used to draw the preview edge.  This returns 3 if there is no edge validation error and 1 otherwise.

Parameters

validBoolean indicating if the width for a valid edge should be returned.

connect

mxConnectionHandler.prototype.connect = function(source,
target,
evt,
dropTarget)

Connects the given source and target using a new edge.  This implementation uses createEdge to create the edge.

Parameters

sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
evtMousedown event of the connect gesture.
dropTargetmxCell that represents the cell under the mouse when it was released.

selectCells

mxConnectionHandler.prototype.selectCells = function(edge,
target)

Selects the given edge after adding a new connection.  The target argument contains the target vertex if one has been inserted.

insertEdge

mxConnectionHandler.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)

Creates, inserts and returns the new edge for the given parameters.  This implementation does only use createEdge if factoryMethod is defined, otherwise mxGraph.insertEdge will be used.

createTargetVertex

mxConnectionHandler.prototype.createTargetVertex = function(evt,
source)

Hook method for creating new vertices on the fly if no target was under the mouse.  This is only called if createTarget is true and returns null.

Parameters

evtMousedown event of the connect gesture.
sourcemxCell that represents the source terminal.

getAlignmentTolerance

mxConnectionHandler.prototype.getAlignmentTolerance = function(evt)

Returns the tolerance for aligning new targets to sources.  This returns the grid size / 2.

createEdge

mxConnectionHandler.prototype.createEdge = function(value,
source,
target,
style)

Creates and returns a new edge using factoryMethod if one exists.  If no factory method is defined, then a new default edge is returned.  The source and target arguments are informal, the actual connection is setup later by the caller of this function.

Parameters

valueValue to be used for creating the edge.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
styleOptional style from the preview edge.

destroy

mxConnectionHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.  This should be called on all instances.  It is called automatically for the built-in instance created for each mxGraph.

mxConstraintHandler

Handles constraints on connection targets.  This class is in charge of showing fixed points when the mouse is over a vertex and handles constraints to establish new connections.

Summary
Functions
mxConstraintHandlerConstructs an new constraint handler.
Variables
pointImagemxImage to be used as the image for fixed connection points.
graphReference to the enclosing mxGraph.
enabledSpecifies if events are handled.
highlightColorSpecifies the color for the highlight.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
resetResets the state of this handler.
getToleranceReturns the tolerance to be used for intersecting connection points.
getImageForConstraintReturns the tolerance to be used for intersecting connection points.
isEventIgnoredReturns true if the given mxMouseEvent should be ignored in update.
isStateIgnoredReturns true if the given state should be ignored.
destroyIconsDestroys the <focusIcons> if they exist.
destroyFocusHighlightDestroys the <focusHighlight> if one exists.
isKeepFocusEventReturns true if the current focused state should not be changed for the given event.
getCellForEventReturns the cell for the given event.
updateUpdates the state of this handler based on the given mxMouseEvent.
redrawTransfers the focus to the given state as a source or target terminal.
setFocusTransfers the focus to the given state as a source or target terminal.
createHighlightShapeCreate the shape used to paint the highlight.
intersectsReturns true if the given icon intersects the given rectangle.
destroyDestroy this handler.

Functions

mxConstraintHandler

function mxConstraintHandler(graph)

Constructs an new constraint handler.

Parameters

graphReference to the enclosing mxGraph.
factoryMethodOptional function to create the edge.  The function takes the source and target mxCell as the first and second argument and returns the mxCell that represents the new edge.

Variables

pointImage

mxConstraintHandler.prototype.pointImage

mxImage to be used as the image for fixed connection points.

graph

mxConstraintHandler.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxConstraintHandler.prototype.enabled

Specifies if events are handled.  Default is true.

highlightColor

mxConstraintHandler.prototype.highlightColor

Specifies the color for the highlight.  Default is mxConstants.DEFAULT_VALID_COLOR.

Functions

isEnabled

mxConstraintHandler.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxConstraintHandler.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

Parameters

enabledBoolean that specifies the new enabled state.

reset

mxConstraintHandler.prototype.reset = function()

Resets the state of this handler.

getTolerance

mxConstraintHandler.prototype.getTolerance = function(me)

Returns the tolerance to be used for intersecting connection points.  This implementation returns mxGraph.tolerance.

Parameters

memxMouseEvent whose tolerance should be returned.

getImageForConstraint

mxConstraintHandler.prototype.getImageForConstraint = function(state,
constraint,
point)

Returns the tolerance to be used for intersecting connection points.

isEventIgnored

mxConstraintHandler.prototype.isEventIgnored = function(me,
source)

Returns true if the given mxMouseEvent should be ignored in update.  This implementation always returns false.

isStateIgnored

mxConstraintHandler.prototype.isStateIgnored = function(state,
source)

Returns true if the given state should be ignored.  This always returns false.

destroyIcons

mxConstraintHandler.prototype.destroyIcons = function()

Destroys the <focusIcons> if they exist.

destroyFocusHighlight

mxConstraintHandler.prototype.destroyFocusHighlight = function()

Destroys the <focusHighlight> if one exists.

isKeepFocusEvent

mxConstraintHandler.prototype.isKeepFocusEvent = function(me)

Returns true if the current focused state should not be changed for the given event.  This returns true if shift and alt are pressed.

getCellForEvent

mxConstraintHandler.prototype.getCellForEvent = function(me,
point)

Returns the cell for the given event.

update

mxConstraintHandler.prototype.update = function(me,
source,
existingEdge,
point)

Updates the state of this handler based on the given mxMouseEvent.  Source is a boolean indicating if the cell is a source or target.

redraw

mxConstraintHandler.prototype.redraw = function()

Transfers the focus to the given state as a source or target terminal.  If the handler is not enabled then the outline is painted, but the constraints are ignored.

setFocus

mxConstraintHandler.prototype.setFocus = function(me,
state,
source)

Transfers the focus to the given state as a source or target terminal.  If the handler is not enabled then the outline is painted, but the constraints are ignored.

createHighlightShape

mxConstraintHandler.prototype.createHighlightShape = function()

Create the shape used to paint the highlight.

Returns true if the given icon intersects the given point.

intersects

mxConstraintHandler.prototype.intersects = function(icon,
mouse,
source,
existingEdge)

Returns true if the given icon intersects the given rectangle.

destroy

mxConstraintHandler.prototype.destroy = function()

Destroy this handler.

mxRubberband

Event handler that selects rectangular regions.  This is not built-into mxGraph.  To enable rubberband selection in a graph, use the following code.

Example

var rubberband = new mxRubberband(graph);
Summary
Functions
mxRubberbandConstructs an event handler that selects rectangular regions in the graph using rubberband selection.
Variables
defaultOpacitySpecifies the default opacity to be used for the rubberband div.
enabledSpecifies if events are handled.
divHolds the DIV element which is currently visible.
sharedDivHolds the DIV element which is used to display the rubberband.
currentXHolds the value of the x argument in the last call to update.
currentYHolds the value of the y argument in the last call to update.
fadeOutOptional fade out effect.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isForceRubberbandEventReturns true if the given mxMouseEvent should start rubberband selection.
mouseDownHandles the event by initiating a rubberband selection.
startSets the start point for the rubberband selection.
mouseMoveHandles the event by updating therubberband selection.
createShapeCreates the rubberband selection shape.
isActiveReturns true if this handler is active.
mouseUpHandles the event by selecting the region of the rubberband using mxGraph.selectRegion.
executeResets the state of this handler and selects the current region for the given event.
resetResets the state of the rubberband selection.
updateSets currentX and currentY and calls repaint.
repaintComputes the bounding box and updates the style of the div.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxRubberband

function mxRubberband(graph)

Constructs an event handler that selects rectangular regions in the graph using rubberband selection.

Variables

defaultOpacity

mxRubberband.prototype.defaultOpacity

Specifies the default opacity to be used for the rubberband div.  Default is 20.

enabled

mxRubberband.prototype.enabled

Specifies if events are handled.  Default is true.

div

mxRubberband.prototype.div

Holds the DIV element which is currently visible.

sharedDiv

mxRubberband.prototype.sharedDiv

Holds the DIV element which is used to display the rubberband.

currentX

mxRubberband.prototype.currentX

Holds the value of the x argument in the last call to update.

currentY

mxRubberband.prototype.currentY

Holds the value of the y argument in the last call to update.

fadeOut

mxRubberband.prototype.fadeOut

Optional fade out effect.  Default is false.

Functions

isEnabled

mxRubberband.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxRubberband.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

isForceRubberbandEvent

mxRubberband.prototype.isForceRubberbandEvent = function(me)

Returns true if the given mxMouseEvent should start rubberband selection.  This implementation returns true if the alt key is pressed.

mouseDown

mxRubberband.prototype.mouseDown = function(sender,
me)

Handles the event by initiating a rubberband selection.  By consuming the event all subsequent events of the gesture are redirected to this handler.

start

mxRubberband.prototype.start = function(x,
y)

Sets the start point for the rubberband selection.

mouseMove

mxRubberband.prototype.mouseMove = function(sender,
me)

Handles the event by updating therubberband selection.

createShape

mxRubberband.prototype.createShape = function()

Creates the rubberband selection shape.

isActive

mxRubberband.prototype.isActive = function(sender,
me)

Returns true if this handler is active.

mouseUp

mxRubberband.prototype.mouseUp = function(sender,
me)

Handles the event by selecting the region of the rubberband using mxGraph.selectRegion.

execute

mxRubberband.prototype.execute = function(evt)

Resets the state of this handler and selects the current region for the given event.

reset

mxRubberband.prototype.reset = function()

Resets the state of the rubberband selection.

update

mxRubberband.prototype.update = function(x,
y)

Sets currentX and currentY and calls repaint.

repaint

mxRubberband.prototype.repaint = function()

Computes the bounding box and updates the style of the div.

destroy

mxRubberband.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.  This does normally not need to be called, it is called automatically when the window unloads.

mxHandle

Implements a single custom handle for vertices.

Summary
Functions
mxHandleConstructs a new handle for the given state.
Variables
cursorSpecifies the cursor to be used for this handle.
imageSpecifies the mxImage to be used to render the handle.
imageSpecifies the mxImage to be used to render the handle.
Functions
getPositionHook for subclassers to return the current position of the handle.
setPositionHooks for subclassers to update the style in the <state>.
executeHook for subclassers to execute the handle.
copyStyleSets the cell style with the given name to the corresponding value in <state>.
processEventProcesses the given mxMouseEvent and invokes setPosition.
positionChangedCalled after setPosition has been called in processEvent.
getRotationReturns the rotation defined in the style of the cell.
getTotalRotationReturns the rotation from the style and the rotation from the direction of the cell.
initCreates and initializes the shapes required for this handle.
createShapeCreates and returns the shape for this handle.
initShapeInitializes <shape> and sets its cursor.
redrawRenders the shape for this handle.
isHtmlRequiredReturns true if this handle should be rendered in HTML.
rotatePointRotates the point by the given angle.
flipPointFlips the given point vertically and/or horizontally.
snapPointSnaps the given point to the grid if ignore is false.
setVisibleShows or hides this handle.
resetResets the state of this handle by setting its visibility to true.
destroyDestroys this handle.

Functions

mxHandle

function mxHandle(state,
cursor,
image)

Constructs a new handle for the given state.

Parameters

statemxCellState of the cell to be handled.

Variables

cursor

mxHandle.prototype.cursor

Specifies the cursor to be used for this handle.  Default is ‘default’.

image

mxHandle.prototype.image

Specifies the mxImage to be used to render the handle.  Default is null.

image

Specifies the mxImage to be used to render the handle.  Default is null.

Functions

getPosition

mxHandle.prototype.getPosition = function(bounds)

Hook for subclassers to return the current position of the handle.

setPosition

mxHandle.prototype.setPosition = function(bounds,
pt,
me)

Hooks for subclassers to update the style in the <state>.

execute

mxHandle.prototype.execute = function()

Hook for subclassers to execute the handle.

copyStyle

mxHandle.prototype.copyStyle = function(key)

Sets the cell style with the given name to the corresponding value in <state>.

processEvent

mxHandle.prototype.processEvent = function(me)

Processes the given mxMouseEvent and invokes setPosition.

positionChanged

mxHandle.prototype.positionChanged = function()

Called after setPosition has been called in processEvent.  This repaints the state using mxCellRenderer.

getRotation

mxHandle.prototype.getRotation = function()

Returns the rotation defined in the style of the cell.

getTotalRotation

mxHandle.prototype.getTotalRotation = function()

Returns the rotation from the style and the rotation from the direction of the cell.

init

mxHandle.prototype.init = function()

Creates and initializes the shapes required for this handle.

createShape

mxHandle.prototype.createShape = function(html)

Creates and returns the shape for this handle.

initShape

mxHandle.prototype.initShape = function(html)

Initializes <shape> and sets its cursor.

redraw

mxHandle.prototype.redraw = function()

Renders the shape for this handle.

isHtmlRequired

mxHandle.prototype.isHtmlRequired = function()

Returns true if this handle should be rendered in HTML.  This returns true if the text node is in the graph container.

rotatePoint

mxHandle.prototype.rotatePoint = function(pt,
alpha)

Rotates the point by the given angle.

flipPoint

mxHandle.prototype.flipPoint = function(pt)

Flips the given point vertically and/or horizontally.

snapPoint

mxHandle.prototype.snapPoint = function(pt,
ignore)

Snaps the given point to the grid if ignore is false.  This modifies the given point in-place and also returns it.

setVisible

mxHandle.prototype.setVisible = function(visible)

Shows or hides this handle.

reset

mxHandle.prototype.reset = function()

Resets the state of this handle by setting its visibility to true.

destroy

mxHandle.prototype.destroy = function()

Destroys this handle.

mxVertexHandler

Event handler for resizing cells.  This handler is automatically created in mxGraph.createHandler.

Summary
Functions
mxVertexHandlerConstructs an event handler that allows to resize vertices and groups.
Variables
graphReference to the enclosing mxGraph.
stateReference to the mxCellState being modified.
singleSizerSpecifies if only one sizer handle at the bottom, right corner should be used.
indexHolds the index of the current handle.
allowHandleBoundsCheckSpecifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
handleImageOptional mxImage to be used as handles.
toleranceOptional tolerance for hit-detection in getHandleForEvent.
rotationEnabledSpecifies if a rotation handle should be visible.
parentHighlightEnabledSpecifies if the parent should be highlighted if a child cell is selected.
rotationRasterSpecifies if rotation steps should be “rasterized” depening on the distance to the handle.
rotationCursorSpecifies the cursor for the rotation handle.
livePreviewSpecifies if resize should change the cell in-place.
manageSizersSpecifies if sizers should be hidden and spaced if the vertex is small.
constrainGroupByChildrenSpecifies if the size of groups should be constrained by the children.
rotationHandleVSpacingVertical spacing for rotation icon.
horizontalOffsetThe horizontal offset for the handles.
verticalOffsetThe horizontal offset for the handles.
Functions
initInitializes the shapes required for this vertex handler.
isRotationHandleVisibleReturns true if the rotation handle should be showing.
isConstrainedEventReturns true if the aspect ratio if the cell should be maintained.
isCenteredEventReturns true if the center of the vertex should be maintained during the resize.
createCustomHandlesReturns an array of custom handles.
updateMinBoundsInitializes the shapes required for this vertex handler.
getSelectionBoundsReturns the mxRectangle that defines the bounds of the selection border.
createParentHighlightShapeCreates the shape used to draw the selection border.
createSelectionShapeCreates the shape used to draw the selection border.
getSelectionColorReturns mxConstants.VERTEX_SELECTION_COLOR.
getSelectionStrokeWidthReturns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
isSelectionDashedReturns <mxConstants.VERTEX_SELECTION_DASHED>.
createSizerCreates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
isSizerVisibleReturns true if the sizer for the given index is visible.
createSizerShapeCreates the shape used for the sizer handle for the specified bounds an index.
createBoundsHelper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.
getHandleForEventReturns the index of the handle for the given event.
isCustomHandleEventReturns true if the given event allows custom handles to be changed.
mouseDownHandles the event if a handle has been clicked.
isLivePreviewBorderCalled if livePreview is enabled to check if a border should be painted.
startStarts the handling of the mouse gesture.
hideHandlesShortcut to hideSizers.
hideSizersHides all sizers except.
checkToleranceChecks if the coordinates for the given event are within the mxGraph.tolerance.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundAngleHook for rounding the angle.
roundLengthHook for rounding the unscaled width or height.
mouseMoveHandles the event by updating the preview.
rotateVertexRotates the vertex.
rotateVertexRotates the vertex.
rotateVertexRotates the vertex.
updateLivePreviewRepaints the live preview.
mouseUpHandles the event by applying the changes to the geometry.
rotateCellRotates the given cell to the given rotation.
rotateClickHook for subclassers to implement a single click on the rotation handle.
rotateCellRotates the given cell and its children by the given angle in degrees.
resetResets the state of this handler.
resizeCellUses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
moveChildrenMoves the children of the given cell by the given vector.
unionReturns the union of the given bounds and location for the specified handle index.
redrawRedraws the handles and the preview.
redrawHandlesRedraws the handles.
getRotationHandlePositionReturns an mxPoint that defines the rotation handle position.
updateParentHighlightUpdates the highlight of the parent if parentHighlightEnabled is true.
drawPreviewRedraws the preview.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxVertexHandler

function mxVertexHandler(state)

Constructs an event handler that allows to resize vertices and groups.

Parameters

statemxCellState of the cell to be resized.

Variables

graph

mxVertexHandler.prototype.graph

Reference to the enclosing mxGraph.

state

mxVertexHandler.prototype.state

Reference to the mxCellState being modified.

singleSizer

mxVertexHandler.prototype.singleSizer

Specifies if only one sizer handle at the bottom, right corner should be used.  Default is false.

index

mxVertexHandler.prototype.index

Holds the index of the current handle.

allowHandleBoundsCheck

mxVertexHandler.prototype.allowHandleBoundsCheck

Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.  Default is true.

handleImage

mxVertexHandler.prototype.handleImage

Optional mxImage to be used as handles.  Default is null.

tolerance

mxVertexHandler.prototype.tolerance

Optional tolerance for hit-detection in getHandleForEvent.  Default is 0.

rotationEnabled

mxVertexHandler.prototype.rotationEnabled

Specifies if a rotation handle should be visible.  Default is false.

parentHighlightEnabled

mxVertexHandler.prototype.parentHighlightEnabled

Specifies if the parent should be highlighted if a child cell is selected.  Default is false.

rotationRaster

mxVertexHandler.prototype.rotationRaster

Specifies if rotation steps should be “rasterized” depening on the distance to the handle.  Default is true.

rotationCursor

mxVertexHandler.prototype.rotationCursor

Specifies the cursor for the rotation handle.  Default is ‘crosshair’.

livePreview

mxVertexHandler.prototype.livePreview

Specifies if resize should change the cell in-place.  This is an experimental feature for non-touch devices.  Default is false.

manageSizers

mxVertexHandler.prototype.manageSizers

Specifies if sizers should be hidden and spaced if the vertex is small.  Default is false.

constrainGroupByChildren

mxVertexHandler.prototype.constrainGroupByChildren

Specifies if the size of groups should be constrained by the children.  Default is false.

rotationHandleVSpacing

mxVertexHandler.prototype.rotationHandleVSpacing

Vertical spacing for rotation icon.  Default is -16.

horizontalOffset

mxVertexHandler.prototype.horizontalOffset

The horizontal offset for the handles.  This is updated in redrawHandles if manageSizers is true and the sizers are offset horizontally.

verticalOffset

mxVertexHandler.prototype.verticalOffset

The horizontal offset for the handles.  This is updated in redrawHandles if manageSizers is true and the sizers are offset vertically.

Functions

init

mxVertexHandler.prototype.init = function()

Initializes the shapes required for this vertex handler.

isRotationHandleVisible

mxVertexHandler.prototype.isRotationHandleVisible = function()

Returns true if the rotation handle should be showing.

isConstrainedEvent

mxVertexHandler.prototype.isConstrainedEvent = function(me)

Returns true if the aspect ratio if the cell should be maintained.

isCenteredEvent

mxVertexHandler.prototype.isCenteredEvent = function(state,
me)

Returns true if the center of the vertex should be maintained during the resize.

createCustomHandles

mxVertexHandler.prototype.createCustomHandles = function()

Returns an array of custom handles.  This implementation returns null.

updateMinBounds

mxVertexHandler.prototype.updateMinBounds = function()

Initializes the shapes required for this vertex handler.

getSelectionBounds

mxVertexHandler.prototype.getSelectionBounds = function(state)

Returns the mxRectangle that defines the bounds of the selection border.

createParentHighlightShape

mxVertexHandler.prototype.createParentHighlightShape = function(bounds)

Creates the shape used to draw the selection border.

createSelectionShape

mxVertexHandler.prototype.createSelectionShape = function(bounds)

Creates the shape used to draw the selection border.

getSelectionColor

mxVertexHandler.prototype.getSelectionColor = function()

Returns mxConstants.VERTEX_SELECTION_COLOR.

getSelectionStrokeWidth

mxVertexHandler.prototype.getSelectionStrokeWidth = function()

Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.

isSelectionDashed

mxVertexHandler.prototype.isSelectionDashed = function()

Returns <mxConstants.VERTEX_SELECTION_DASHED>.

createSizer

mxVertexHandler.prototype.createSizer = function(cursor,
index,
size,
fillColor)

Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.

isSizerVisible

mxVertexHandler.prototype.isSizerVisible = function(index)

Returns true if the sizer for the given index is visible.  This returns true for all given indices.

createSizerShape

mxVertexHandler.prototype.createSizerShape = function(bounds,
index,
fillColor)

Creates the shape used for the sizer handle for the specified bounds an index.  Only images and rectangles should be returned if support for HTML labels with not foreign objects is required.

createBounds

Helper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.

getHandleForEvent

mxVertexHandler.prototype.getHandleForEvent = function(me)

Returns the index of the handle for the given event.  This returns the index of the sizer from where the event originated or <mxEvent.LABEL_INDEX>.

isCustomHandleEvent

mxVertexHandler.prototype.isCustomHandleEvent = function(me)

Returns true if the given event allows custom handles to be changed.  This implementation returns true.

mouseDown

mxVertexHandler.prototype.mouseDown = function(sender,
me)

Handles the event if a handle has been clicked.  By consuming the event all subsequent events of the gesture are redirected to this handler.

isLivePreviewBorder

mxVertexHandler.prototype.isLivePreviewBorder = function()

Called if livePreview is enabled to check if a border should be painted.  This implementation returns true if the shape is transparent.

start

mxVertexHandler.prototype.start = function(x,
y,
index)

Starts the handling of the mouse gesture.

hideHandles

Shortcut to hideSizers.

hideSizers

mxVertexHandler.prototype.hideSizers = function()

Hides all sizers except.

Starts the handling of the mouse gesture.

checkTolerance

mxVertexHandler.prototype.checkTolerance = function(me)

Checks if the coordinates for the given event are within the mxGraph.tolerance.  If the event is a mouse event then the tolerance is ignored.

updateHint

mxVertexHandler.prototype.updateHint = function(me)

Hook for subclassers do show details while the handler is active.

removeHint

mxVertexHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundAngle

mxVertexHandler.prototype.roundAngle = function(angle)

Hook for rounding the angle.  This uses Math.round.

roundLength

mxVertexHandler.prototype.roundLength = function(length)

Hook for rounding the unscaled width or height.  This uses Math.round.

mouseMove

mxVertexHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the preview.

rotateVertex

Rotates the vertex.

rotateVertex

mxVertexHandler.prototype.rotateVertex = function(me)

Rotates the vertex.

rotateVertex

Rotates the vertex.

updateLivePreview

mxVertexHandler.prototype.updateLivePreview = function(me)

Repaints the live preview.

mouseUp

mxVertexHandler.prototype.mouseUp = function(sender,
me)

Handles the event by applying the changes to the geometry.

rotateCell

Rotates the given cell to the given rotation.

rotateClick

mxVertexHandler.prototype.rotateClick = function()

Hook for subclassers to implement a single click on the rotation handle.  This code is executed as part of the model transaction.  This implementation is empty.

rotateCell

mxVertexHandler.prototype.rotateCell = function(cell,
angle,
parent)

Rotates the given cell and its children by the given angle in degrees.

Parameters

cellmxCell to be rotated.
angleAngle in degrees.

reset

mxVertexHandler.prototype.reset = function()

Resets the state of this handler.

resizeCell

mxVertexHandler.prototype.resizeCell = function(cell,
dx,
dy,
index,
gridEnabled,
constrained,
recurse)

Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.

moveChildren

mxVertexHandler.prototype.moveChildren = function(cell,
dx,
dy)

Moves the children of the given cell by the given vector.

union

mxVertexHandler.prototype.union = function(bounds,
dx,
dy,
index,
gridEnabled,
scale,
tr,
constrained,
centered)

Returns the union of the given bounds and location for the specified handle index.

To override this to limit the size of vertex via a minWidth/-Height style, the following code can be used.

var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function(bounds, dx, dy, index, gridEnabled, scale, tr, constrained)
{
  var result = vertexHandlerUnion.apply(this, arguments);

  result.width = Math.max(result.width, mxUtils.getNumber(this.state.style, 'minWidth', 0));
  result.height = Math.max(result.height, mxUtils.getNumber(this.state.style, 'minHeight', 0));

  return result;
};

The minWidth/-Height style can then be used as follows

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'minWidth=100;minHeight=100;');

To override this to update the height for a wrapped text if the width of a vertex is changed, the following can be used.

var mxVertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function(bounds, dx, dy, index, gridEnabled, scale, tr, constrained)
{
  var result = mxVertexHandlerUnion.apply(this, arguments);
  var s = this.state;

  if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&
      s.text != null && s.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')
  {
    var label = this.graph.getLabel(s.cell);
    var fontSize = mxUtils.getNumber(s.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
    var ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft

    result.height = mxUtils.getSizeForString(label, fontSize, s.style[mxConstants.STYLE_FONTFAMILY], ww).height;
  }

  return result;
};

redraw

mxVertexHandler.prototype.redraw = function()

Redraws the handles and the preview.

redrawHandles

mxVertexHandler.prototype.redrawHandles = function()

Redraws the handles.  To hide certain handles the following code can be used.

mxVertexHandler.prototype.redrawHandles = function()
{
  mxVertexHandlerRedrawHandles.apply(this, arguments);

  if (this.sizers != null && this.sizers.length > 7)
  {
    this.sizers[1].node.style.display = 'none';
    this.sizers[6].node.style.display = 'none';
  }
};

getRotationHandlePosition

mxVertexHandler.prototype.getRotationHandlePosition = function()

Returns an mxPoint that defines the rotation handle position.

updateParentHighlight

mxVertexHandler.prototype.updateParentHighlight = function()

Updates the highlight of the parent if parentHighlightEnabled is true.

drawPreview

mxVertexHandler.prototype.drawPreview = function()

Redraws the preview.

destroy

mxVertexHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxEdgeHandler

Graph event handler that reconnects edges and modifies control points and the edge label location.  Uses <mxTerminalMarker> for finding and highlighting new source and target vertices.  This handler is automatically created in mxGraph.createHandler for each selected edge.

To enable adding/removing control points, the following code can be used

mxEdgeHandler.prototype.addEnabled = true;
mxEdgeHandler.prototype.removeEnabled = true;

Note: This experimental feature is not recommended for production use.

Summary
Functions
mxEdgeHandlerConstructs an edge handler for the specified mxCellState.
Variables
graphReference to the enclosing mxGraph.
stateReference to the mxCellState being modified.
markerHolds the <mxTerminalMarker> which is used for highlighting terminals.
constraintHandlerHolds the mxConstraintHandler used for drawing and highlighting constraints.
errorHolds the current validation error while a connection is being changed.
shapeHolds the mxShape that represents the preview edge.
bendsHolds the mxShapes that represent the points.
labelShapeHolds the mxShape that represents the label position.
cloneEnabledSpecifies if cloning by control-drag is enabled.
addEnabledSpecifies if adding bends by shift-click is enabled.
removeEnabledSpecifies if removing bends by shift-click is enabled.
dblClickRemoveEnabledSpecifies if removing bends by double click is enabled.
mergeRemoveEnabledSpecifies if removing bends by dropping them on other bends is enabled.
straightRemoveEnabledSpecifies if removing bends by creating straight segments should be enabled.
virtualBendsEnabledSpecifies if virtual bends should be added in the center of each segments.
virtualBendOpacityOpacity to be used for virtual bends (see virtualBendsEnabled).
parentHighlightEnabledSpecifies if the parent should be highlighted if a child cell is selected.
preferHtmlSpecifies if bends should be added to the graph container.
allowHandleBoundsCheckSpecifies if the bounds of handles should be used for hit-detection in IE Default is true.
snapToTerminalsSpecifies if waypoints should snap to the routing centers of terminals.
handleImageOptional mxImage to be used as handles.
toleranceOptional tolerance for hit-detection in getHandleForEvent.
outlineConnectSpecifies if connections to the outline of a highlighted target should be enabled.
manageLabelHandleSpecifies if the label handle should be moved if it intersects with another handle.
Functions
initInitializes the shapes required for this edge handler.
createCustomHandlesReturns an array of custom handles.
isVirtualBendsEnabledReturns true if virtual bends should be added.
isAddPointEventReturns true if the given event is a trigger to add a new point.
isRemovePointEventReturns true if the given event is a trigger to remove a point.
getSelectionPointsReturns the list of points that defines the selection stroke.
createSelectionShapeCreates the shape used to draw the selection border.
createSelectionShapeCreates the shape used to draw the selection border.
getSelectionColorReturns mxConstants.EDGE_SELECTION_COLOR.
getSelectionStrokeWidthReturns mxConstants.EDGE_SELECTION_STROKEWIDTH.
isSelectionDashedReturns <mxConstants.EDGE_SELECTION_DASHED>.
isConnectableCellReturns true if the given cell is connectable.
getCellAtCreates and returns the mxCellMarker used in marker.
createMarkerCreates and returns the mxCellMarker used in marker.
validateConnectionReturns the error message or an empty string if the connection for the given source, target pair is not valid.
createBendsCreates and returns the bends used for modifying the edge.
createVirtualBendsCreates and returns the bends used for modifying the edge.
isHandleEnabledCreates the shape used to display the given bend.
isHandleVisibleReturns true if the handle at the given index is visible.
createHandleShapeCreates the shape used to display the given bend.
createLabelHandleShapeCreates the shape used to display the the label handle.
initBendHelper method to initialize the given bend.
getHandleForEventReturns the index of the handle for the given event.
isAddVirtualBendEventReturns true if the given event allows virtual bends to be added.
isCustomHandleEventReturns true if the given event allows custom handles to be changed.
mouseDownHandles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
startStarts the handling of the mouse gesture.
clonePreviewStateReturns a clone of the current preview state for the given point and terminal.
getSnapToTerminalToleranceReturns the tolerance for the guides.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundLengthHook for rounding the unscaled width or height.
isSnapToTerminalsEventReturns true if snapToTerminals is true and if alt is not pressed.
getPointForEventReturns the point for the given event.
getPreviewTerminalStateUpdates the given preview state taking into account the state of the constraint handler.
getPreviewPointsUpdates the given preview state taking into account the state of the constraint handler.
isOutlineConnectEventReturns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updatePreviewStateUpdates the given preview state taking into account the state of the constraint handler.
mouseMoveHandles the event by updating the preview.
mouseUpHandles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
resetResets the state of this handler.
setPreviewColorSets the color of the preview to the given value.
convertPointConverts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
moveLabelChanges the coordinates for the label of the given edge.
connectChanges the terminal or terminal point of the given edge in the graph model.
changeTerminalPointChanges the terminal point of the given edge.
changePointsChanges the control points of the given edge in the graph model.
addPointAdds a control point for the given state and event.
addPointAtAdds a control point at the given point.
removePointRemoves the control point at the given index from the given state.
getHandleFillColorReturns the fillcolor for the handle at the given index.
redrawRedraws the preview, and the bends- and label control points.
redrawHandlesRedraws the handles.
hideHandlesShortcut to <hideSizers>.
redrawInnerBendsUpdates and redraws the inner bends.
checkLabelHandleChecks if the label handle intersects the given bounds and moves it if it intersects.
drawPreviewRedraws the preview.
refreshRefreshes the bends of this handler.
destroyBendsDestroys all elements in bends.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxEdgeHandler

function mxEdgeHandler(state)

Constructs an edge handler for the specified mxCellState.

Parameters

statemxCellState of the cell to be handled.

Variables

graph

mxEdgeHandler.prototype.graph

Reference to the enclosing mxGraph.

state

mxEdgeHandler.prototype.state

Reference to the mxCellState being modified.

marker

mxEdgeHandler.prototype.marker

Holds the <mxTerminalMarker> which is used for highlighting terminals.

constraintHandler

mxEdgeHandler.prototype.constraintHandler

Holds the mxConstraintHandler used for drawing and highlighting constraints.

error

mxEdgeHandler.prototype.error

Holds the current validation error while a connection is being changed.

shape

mxEdgeHandler.prototype.shape

Holds the mxShape that represents the preview edge.

bends

mxEdgeHandler.prototype.bends

Holds the mxShapes that represent the points.

labelShape

mxEdgeHandler.prototype.labelShape

Holds the mxShape that represents the label position.

cloneEnabled

mxEdgeHandler.prototype.cloneEnabled

Specifies if cloning by control-drag is enabled.  Default is true.

addEnabled

mxEdgeHandler.prototype.addEnabled

Specifies if adding bends by shift-click is enabled.  Default is false.  Note: This experimental feature is not recommended for production use.

removeEnabled

mxEdgeHandler.prototype.removeEnabled

Specifies if removing bends by shift-click is enabled.  Default is false.  Note: This experimental feature is not recommended for production use.

dblClickRemoveEnabled

mxEdgeHandler.prototype.dblClickRemoveEnabled

Specifies if removing bends by double click is enabled.  Default is false.

mergeRemoveEnabled

mxEdgeHandler.prototype.mergeRemoveEnabled

Specifies if removing bends by dropping them on other bends is enabled.  Default is false.

straightRemoveEnabled

mxEdgeHandler.prototype.straightRemoveEnabled

Specifies if removing bends by creating straight segments should be enabled.  If enabled, this can be overridden by holding down the alt key while moving.  Default is false.

virtualBendsEnabled

mxEdgeHandler.prototype.virtualBendsEnabled

Specifies if virtual bends should be added in the center of each segments.  These bends can then be used to add new waypoints.  Default is false.

virtualBendOpacity

mxEdgeHandler.prototype.virtualBendOpacity

Opacity to be used for virtual bends (see virtualBendsEnabled).  Default is 20.

parentHighlightEnabled

mxEdgeHandler.prototype.parentHighlightEnabled

Specifies if the parent should be highlighted if a child cell is selected.  Default is false.

preferHtml

mxEdgeHandler.prototype.preferHtml

Specifies if bends should be added to the graph container.  This is updated in init based on whether the edge or one of its terminals has an HTML label in the container.

allowHandleBoundsCheck

mxEdgeHandler.prototype.allowHandleBoundsCheck

Specifies if the bounds of handles should be used for hit-detection in IE Default is true.

snapToTerminals

mxEdgeHandler.prototype.snapToTerminals

Specifies if waypoints should snap to the routing centers of terminals.  Default is false.

handleImage

mxEdgeHandler.prototype.handleImage

Optional mxImage to be used as handles.  Default is null.

tolerance

mxEdgeHandler.prototype.tolerance

Optional tolerance for hit-detection in getHandleForEvent.  Default is 0.

outlineConnect

mxEdgeHandler.prototype.outlineConnect

Specifies if connections to the outline of a highlighted target should be enabled.  This will allow to place the connection point along the outline of the highlighted target.  Default is false.

manageLabelHandle

mxEdgeHandler.prototype.manageLabelHandle

Specifies if the label handle should be moved if it intersects with another handle.  Uses checkLabelHandle for checking and moving.  Default is false.

Functions

init

mxEdgeHandler.prototype.init = function()

Initializes the shapes required for this edge handler.

createCustomHandles

mxEdgeHandler.prototype.createCustomHandles = function()

Returns an array of custom handles.  This implementation returns null.

isVirtualBendsEnabled

mxEdgeHandler.prototype.isVirtualBendsEnabled = function(evt)

Returns true if virtual bends should be added.  This returns true if virtualBendsEnabled is true and the current style allows and renders custom waypoints.

isAddPointEvent

mxEdgeHandler.prototype.isAddPointEvent = function(evt)

Returns true if the given event is a trigger to add a new point.  This implementation returns true if shift is pressed.

isRemovePointEvent

mxEdgeHandler.prototype.isRemovePointEvent = function(evt)

Returns true if the given event is a trigger to remove a point.  This implementation returns true if shift is pressed.

getSelectionPoints

mxEdgeHandler.prototype.getSelectionPoints = function(state)

Returns the list of points that defines the selection stroke.

createSelectionShape

Creates the shape used to draw the selection border.

createSelectionShape

mxEdgeHandler.prototype.createSelectionShape = function(points)

Creates the shape used to draw the selection border.

getSelectionColor

mxEdgeHandler.prototype.getSelectionColor = function()

Returns mxConstants.EDGE_SELECTION_COLOR.

getSelectionStrokeWidth

mxEdgeHandler.prototype.getSelectionStrokeWidth = function()

Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.

isSelectionDashed

mxEdgeHandler.prototype.isSelectionDashed = function()

Returns <mxConstants.EDGE_SELECTION_DASHED>.

isConnectableCell

mxEdgeHandler.prototype.isConnectableCell = function(cell)

Returns true if the given cell is connectable.  This is a hook to disable floating connections.  This implementation returns true.

getCellAt

mxEdgeHandler.prototype.getCellAt = function(x,
y)

Creates and returns the mxCellMarker used in marker.

createMarker

mxEdgeHandler.prototype.createMarker = function()

Creates and returns the mxCellMarker used in marker.

validateConnection

mxEdgeHandler.prototype.validateConnection = function(source,
target)

Returns the error message or an empty string if the connection for the given source, target pair is not valid.  Otherwise it returns null.  This implementation uses mxGraph.getEdgeValidationError.

Parameters

sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.

createBends

mxEdgeHandler.prototype.createBends = function()

Creates and returns the bends used for modifying the edge.  This is typically an array of mxRectangleShapes.

createVirtualBends

mxEdgeHandler.prototype.createVirtualBends = function()

Creates and returns the bends used for modifying the edge.  This is typically an array of mxRectangleShapes.

isHandleEnabled

mxEdgeHandler.prototype.isHandleEnabled = function(index)

Creates the shape used to display the given bend.

isHandleVisible

mxEdgeHandler.prototype.isHandleVisible = function(index)

Returns true if the handle at the given index is visible.

createHandleShape

mxEdgeHandler.prototype.createHandleShape = function(index)

Creates the shape used to display the given bend.  Note that the index may be null for special cases, such as when called from mxElbowEdgeHandler.createVirtualBend.  Only images and rectangles should be returned if support for HTML labels with not foreign objects is required.  Index if null for virtual handles.

createLabelHandleShape

mxEdgeHandler.prototype.createLabelHandleShape = function()

Creates the shape used to display the the label handle.

initBend

mxEdgeHandler.prototype.initBend = function(bend,
dblClick)

Helper method to initialize the given bend.

Parameters

bendmxShape that represents the bend to be initialized.

getHandleForEvent

mxEdgeHandler.prototype.getHandleForEvent = function(me)

Returns the index of the handle for the given event.

isAddVirtualBendEvent

mxEdgeHandler.prototype.isAddVirtualBendEvent = function(me)

Returns true if the given event allows virtual bends to be added.  This implementation returns true.

isCustomHandleEvent

mxEdgeHandler.prototype.isCustomHandleEvent = function(me)

Returns true if the given event allows custom handles to be changed.  This implementation returns true.

mouseDown

mxEdgeHandler.prototype.mouseDown = function(sender,
me)

Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.  The indices may be one of <LABEL_HANDLE> or the number of the respective control point.  The source and target points are used for reconnecting the edge.

start

mxEdgeHandler.prototype.start = function(x,
y,
index)

Starts the handling of the mouse gesture.

clonePreviewState

mxEdgeHandler.prototype.clonePreviewState = function(point,
terminal)

Returns a clone of the current preview state for the given point and terminal.

getSnapToTerminalTolerance

mxEdgeHandler.prototype.getSnapToTerminalTolerance = function()

Returns the tolerance for the guides.  Default value is gridSize * scale / 2.

updateHint

mxEdgeHandler.prototype.updateHint = function(me,
point)

Hook for subclassers do show details while the handler is active.

removeHint

mxEdgeHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundLength

mxEdgeHandler.prototype.roundLength = function(length)

Hook for rounding the unscaled width or height.  This uses Math.round.

isSnapToTerminalsEvent

mxEdgeHandler.prototype.isSnapToTerminalsEvent = function(me)

Returns true if snapToTerminals is true and if alt is not pressed.

getPointForEvent

mxEdgeHandler.prototype.getPointForEvent = function(me)

Returns the point for the given event.

getPreviewTerminalState

mxEdgeHandler.prototype.getPreviewTerminalState = function(me)

Updates the given preview state taking into account the state of the constraint handler.

getPreviewPoints

mxEdgeHandler.prototype.getPreviewPoints = function(pt,
me)

Updates the given preview state taking into account the state of the constraint handler.

Parameters

ptmxPoint that contains the current pointer position.
meOptional mxMouseEvent that contains the current event.

isOutlineConnectEvent

mxEdgeHandler.prototype.isOutlineConnectEvent = function(me)

Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.

updatePreviewState

mxEdgeHandler.prototype.updatePreviewState = function(edge,
point,
terminalState,
me,
outline)

Updates the given preview state taking into account the state of the constraint handler.

mouseMove

mxEdgeHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the preview.

mouseUp

mxEdgeHandler.prototype.mouseUp = function(sender,
me)

Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.

reset

mxEdgeHandler.prototype.reset = function()

Resets the state of this handler.

setPreviewColor

mxEdgeHandler.prototype.setPreviewColor = function(color)

Sets the color of the preview to the given value.

convertPoint

mxEdgeHandler.prototype.convertPoint = function(point,
gridEnabled)

Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.  Returns the given, modified point instance.

Parameters

pointmxPoint to be converted.
gridEnabledBoolean that specifies if the grid should be applied.

moveLabel

mxEdgeHandler.prototype.moveLabel = function(edgeState,
x,
y)

Changes the coordinates for the label of the given edge.

Parameters

edgemxCell that represents the edge.
xInteger that specifies the x-coordinate of the new location.
yInteger that specifies the y-coordinate of the new location.

connect

mxEdgeHandler.prototype.connect = function(edge,
terminal,
isSource,
isClone,
me)

Changes the terminal or terminal point of the given edge in the graph model.

Parameters

edgemxCell that represents the edge to be reconnected.
terminalmxCell that represents the new terminal.
isSourceBoolean indicating if the new terminal is the source or target terminal.
isCloneBoolean indicating if the new connection should be a clone of the old edge.
memxMouseEvent that contains the mouse up event.

changeTerminalPoint

mxEdgeHandler.prototype.changeTerminalPoint = function(edge,
point,
isSource,
clone)

Changes the terminal point of the given edge.

changePoints

mxEdgeHandler.prototype.changePoints = function(edge,
points,
clone)

Changes the control points of the given edge in the graph model.

addPoint

mxEdgeHandler.prototype.addPoint = function(state,
evt)

Adds a control point for the given state and event.

addPointAt

mxEdgeHandler.prototype.addPointAt = function(state,
x,
y)

Adds a control point at the given point.

removePoint

mxEdgeHandler.prototype.removePoint = function(state,
index)

Removes the control point at the given index from the given state.

getHandleFillColor

mxEdgeHandler.prototype.getHandleFillColor = function(index)

Returns the fillcolor for the handle at the given index.

redraw

mxEdgeHandler.prototype.redraw = function()

Redraws the preview, and the bends- and label control points.

redrawHandles

mxEdgeHandler.prototype.redrawHandles = function()

Redraws the handles.

hideHandles

Shortcut to <hideSizers>.

redrawInnerBends

mxEdgeHandler.prototype.redrawInnerBends = function(p0,
pe)

Updates and redraws the inner bends.

Parameters

p0mxPoint that represents the location of the first point.
pemxPoint that represents the location of the last point.

checkLabelHandle

mxEdgeHandler.prototype.checkLabelHandle = function(b)

Checks if the label handle intersects the given bounds and moves it if it intersects.

drawPreview

mxEdgeHandler.prototype.drawPreview = function()

Redraws the preview.

refresh

mxEdgeHandler.prototype.refresh = function()

Refreshes the bends of this handler.

destroyBends

mxEdgeHandler.prototype.destroyBends = function(bends)

Destroys all elements in bends.

destroy

mxEdgeHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.  This does normally not need to be called as handlers are destroyed automatically when the corresponding cell is deselected.

mxElbowEdgeHandler

Graph event handler that reconnects edges and modifies control points and the edge label location.  Uses <mxTerminalMarker> for finding and highlighting new source and target vertices.  This handler is automatically created in mxGraph.createHandler.  It extends mxEdgeHandler.

Summary
Functions
mxEdgeHandlerConstructs an edge handler for the specified mxCellState.
Variables
doubleClickOrientationResourceSpecifies the resource key for the tooltip to be displayed on the single control point for routed edges.
Functions
createBendsOverrides mxEdgeHandler.createBends to create custom bends.
createVirtualBendCreates a virtual bend that supports double clicking and calls mxGraph.flipEdge.
getCursorForBendReturns the cursor to be used for the bend.
getTooltipForNodeReturns the tooltip for the given node.
convertPointConverts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
redrawInnerBendsUpdates and redraws the inner bends.
getCurrentPointsReturns the current absolute points.
getPreviewPointsUpdates the given preview state taking into account the state of the constraint handler.
updatePreviewStateOverridden to perform optimization of the edge style result.
getTooltipForNodeReturns no tooltips.
createBendsAdds custom bends for the center of each segment.
createBendsAdds custom bends for the center of each segment.
redrawOverridden to invoke <refresh> before the redraw.
redrawInnerBendsUpdates the position of the custom bends.

Functions

mxEdgeHandler

Constructs an edge handler for the specified mxCellState.

Parameters

statemxCellState of the cell to be modified.

Variables

doubleClickOrientationResource

mxElbowEdgeHandler.prototype.doubleClickOrientationResource

Specifies the resource key for the tooltip to be displayed on the single control point for routed edges.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘doubleClickOrientation’.

Functions

createBends

mxElbowEdgeHandler.prototype.createBends = function()

Overrides mxEdgeHandler.createBends to create custom bends.

createVirtualBend

mxElbowEdgeHandler.prototype.createVirtualBend = function(dblClickHandler)

Creates a virtual bend that supports double clicking and calls mxGraph.flipEdge.

getCursorForBend

mxElbowEdgeHandler.prototype.getCursorForBend = function()

Returns the cursor to be used for the bend.

getTooltipForNode

mxElbowEdgeHandler.prototype.getTooltipForNode = function(node)

Returns the tooltip for the given node.

convertPoint

mxElbowEdgeHandler.prototype.convertPoint = function(point,
gridEnabled)

Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.

Parameters

pointmxPoint to be converted.
gridEnabledBoolean that specifies if the grid should be applied.

redrawInnerBends

mxElbowEdgeHandler.prototype.redrawInnerBends = function(p0,
pe)

Updates and redraws the inner bends.

Parameters

p0mxPoint that represents the location of the first point.
pemxPoint that represents the location of the last point.

getCurrentPoints

mxEdgeSegmentHandler.prototype.getCurrentPoints = function()

Returns the current absolute points.

getPreviewPoints

mxEdgeSegmentHandler.prototype.getPreviewPoints = function(point)

Updates the given preview state taking into account the state of the constraint handler.

updatePreviewState

mxEdgeSegmentHandler.prototype.updatePreviewState = function(edge,
point,
terminalState,
me)

Overridden to perform optimization of the edge style result.

getTooltipForNode

mxEdgeSegmentHandler.prototype.getTooltipForNode = function(node)

Returns no tooltips.

createBends

Adds custom bends for the center of each segment.

createBends

mxEdgeSegmentHandler.prototype.createBends = function()

Adds custom bends for the center of each segment.

redraw

mxEdgeSegmentHandler.prototype.redraw = function()

Overridden to invoke <refresh> before the redraw.

redrawInnerBends

mxEdgeSegmentHandler.prototype.redrawInnerBends = function(p0,
pe)

Updates the position of the custom bends.

mxKeyHandler

Event handler that listens to keystroke events.  This is not a singleton, however, it is normally only required once if the target is the document element (default).

This handler installs a key event listener in the topmost DOM node and processes all events that originate from descandants of <mxGraph.container> or from the topmost DOM node.  The latter means that all unhandled keystrokes are handled by this object regardless of the focused state of the graph.

Example

The following example creates a key handler that listens to the delete key (46) and deletes the selection cells if the graph is enabled.

var keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(46, function(evt)
{
  if (graph.isEnabled())
  {
    graph.removeCells();
  }
});

Keycodes

See http://tinyurl.com/yp8jgl or http://tinyurl.com/229yqw for a list of keycodes or install a key event listener into the document element and print the key codes of the respective events to the console.

To support the Command key and the Control key on the Mac, the following code can be used.

keyHandler.getFunction = function(evt)
{
  if (evt != null)
  {
    return (mxEvent.isControlDown(evt) || (mxClient.IS_MAC && evt.metaKey)) ? this.controlKeys[evt.keyCode] : this.normalKeys[evt.keyCode];
  }

  return null;
};
Summary
Functions
mxKeyHandlerConstructs an event handler that executes functions bound to specific keystrokes.
Variables
graphReference to the mxGraph associated with this handler.
targetReference to the target DOM, that is, the DOM node where the key event listeners are installed.
normalKeysMaps from keycodes to functions for non-pressed control keys.
shiftKeysMaps from keycodes to functions for pressed shift keys.
controlKeysMaps from keycodes to functions for pressed control keys.
controlShiftKeysMaps from keycodes to functions for pressed control and shift keys.
enabledSpecifies if events are handled.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling by updating enabled.
bindKeyBinds the specified keycode to the given function.
bindShiftKeyBinds the specified keycode to the given function.
bindControlKeyBinds the specified keycode to the given function.
bindControlShiftKeyBinds the specified keycode to the given function.
isControlDownReturns true if the control key is pressed.
getFunctionReturns the function associated with the given key event or null if no function is associated with the given event.
isGraphEventReturns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the <mxGraph.container>, or the mxGraph.cellEditor of the graph.
keyDownHandles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
isEnabledForEventReturns true if the given event should be handled.
isEventIgnoredReturns true if the given keystroke should be ignored.
escapeHook to process ESCAPE keystrokes.
destroyDestroys the handler and all its references into the DOM.

Functions

mxKeyHandler

function mxKeyHandler(graph,
target)

Constructs an event handler that executes functions bound to specific keystrokes.

Parameters

graphReference to the associated mxGraph.
targetOptional reference to the event target.  If null, the document element is used as the event target, that is, the object where the key event listener is installed.

Variables

graph

mxKeyHandler.prototype.graph

Reference to the mxGraph associated with this handler.

target

mxKeyHandler.prototype.target

Reference to the target DOM, that is, the DOM node where the key event listeners are installed.

normalKeys

mxKeyHandler.prototype.normalKeys

Maps from keycodes to functions for non-pressed control keys.

shiftKeys

mxKeyHandler.prototype.shiftKeys

Maps from keycodes to functions for pressed shift keys.

controlKeys

mxKeyHandler.prototype.controlKeys

Maps from keycodes to functions for pressed control keys.

controlShiftKeys

mxKeyHandler.prototype.controlShiftKeys

Maps from keycodes to functions for pressed control and shift keys.

enabled

mxKeyHandler.prototype.enabled

Specifies if events are handled.  Default is true.

Functions

isEnabled

mxKeyHandler.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxKeyHandler.prototype.setEnabled = function(enabled)

Enables or disables event handling by updating enabled.

Parameters

enabledBoolean that specifies the new enabled state.

bindKey

mxKeyHandler.prototype.bindKey = function(code,
funct)

Binds the specified keycode to the given function.  This binding is used if the control key is not pressed.

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

bindShiftKey

mxKeyHandler.prototype.bindShiftKey = function(code,
funct)

Binds the specified keycode to the given function.  This binding is used if the shift key is pressed.

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

bindControlKey

mxKeyHandler.prototype.bindControlKey = function(code,
funct)

Binds the specified keycode to the given function.  This binding is used if the control key is pressed.

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

bindControlShiftKey

mxKeyHandler.prototype.bindControlShiftKey = function(code,
funct)

Binds the specified keycode to the given function.  This binding is used if the control and shift key are pressed.

Parameters

codeInteger that specifies the keycode.
functJavaScript function that takes the key event as an argument.

isControlDown

mxKeyHandler.prototype.isControlDown = function(evt)

Returns true if the control key is pressed.  This uses mxEvent.isControlDown.

Parameters

evtKey event whose control key pressed state should be returned.

getFunction

mxKeyHandler.prototype.getFunction = function(evt)

Returns the function associated with the given key event or null if no function is associated with the given event.

Parameters

evtKey event whose associated function should be returned.

isGraphEvent

mxKeyHandler.prototype.isGraphEvent = function(evt)

Returns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the <mxGraph.container>, or the mxGraph.cellEditor of the graph.

Parameters

evtKey event that represents the keystroke.

keyDown

mxKeyHandler.prototype.keyDown = function(evt)

Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.

Parameters

evtKey event that represents the keystroke.

isEnabledForEvent

mxKeyHandler.prototype.isEnabledForEvent = function(evt)

Returns true if the given event should be handled.  isEventIgnored is called later if the event is not an escape key stroke, in which case escape is called.  This implementation returns true if isEnabled returns true for both, this handler and graph, if the event is not consumed and if isGraphEvent returns true.

Parameters

evtKey event that represents the keystroke.

isEventIgnored

mxKeyHandler.prototype.isEventIgnored = function(evt)

Returns true if the given keystroke should be ignored.  This returns graph.isEditing().

Parameters

evtKey event that represents the keystroke.

escape

mxKeyHandler.prototype.escape = function(evt)

Hook to process ESCAPE keystrokes.  This implementation invokes mxGraph.stopEditing to cancel the current editing, connecting and/or other ongoing modifications.

Parameters

evtKey event that represents the keystroke.  Possible keycode in this case is 27 (ESCAPE).

destroy

mxKeyHandler.prototype.destroy = function()

Destroys the handler and all its references into the DOM.  This does normally not need to be called, it is called automatically when the window unloads (in IE).

mxTooltipHandler

Graph event handler that displays tooltips.  mxGraph.getTooltip is used to get the tooltip for a cell or handle.  This handler is built-into <mxGraph.tooltipHandler> and enabled using mxGraph.setTooltips.

Example

(code> new mxTooltipHandler(graph); (end)

Summary
Functions
mxTooltipHandlerConstructs an event handler that displays tooltips with the specified delay (in milliseconds).
Variables
zIndexSpecifies the zIndex for the tooltip and its shadow.
graphReference to the enclosing mxGraph.
delayDelay to show the tooltip in milliseconds.
ignoreTouchEventsSpecifies if touch and pen events should be ignored.
hideOnHoverSpecifies if the tooltip should be hidden if the mouse is moved over the current cell.
destroyedTrue if this handler was destroyed using destroy.
enabledSpecifies if events are handled.
Functions
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isHideOnHoverReturns hideOnHover.
setHideOnHoverSets hideOnHover.
initInitializes the DOM nodes required for this tooltip handler.
getStateForEventReturns the mxCellState to be used for showing a tooltip for this event.
mouseDownHandles the event by initiating a rubberband selection.
mouseMoveHandles the event by updating the rubberband selection.
mouseUpHandles the event by resetting the tooltip timer or hiding the existing tooltip.
resetTimerResets the timer.
resetResets and/or restarts the timer to trigger the display of the tooltip.
hideHides the tooltip and resets the timer.
hideTooltipHides the tooltip.
showShows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxTooltipHandler

function mxTooltipHandler(graph,
delay)

Constructs an event handler that displays tooltips with the specified delay (in milliseconds).  If no delay is specified then a default delay of 500 ms (0.5 sec) is used.

Parameters

graphReference to the enclosing mxGraph.
delayOptional delay in milliseconds.

Variables

zIndex

mxTooltipHandler.prototype.zIndex

Specifies the zIndex for the tooltip and its shadow.  Default is 10005.

graph

mxTooltipHandler.prototype.graph

Reference to the enclosing mxGraph.

delay

mxTooltipHandler.prototype.delay

Delay to show the tooltip in milliseconds.  Default is 500.

ignoreTouchEvents

mxTooltipHandler.prototype.ignoreTouchEvents

Specifies if touch and pen events should be ignored.  Default is true.

hideOnHover

mxTooltipHandler.prototype.hideOnHover

Specifies if the tooltip should be hidden if the mouse is moved over the current cell.  Default is false.

destroyed

mxTooltipHandler.prototype.destroyed

True if this handler was destroyed using destroy.

enabled

mxTooltipHandler.prototype.enabled

Specifies if events are handled.  Default is true.

Functions

isEnabled

mxTooltipHandler.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxTooltipHandler.prototype.setEnabled = function(enabled)

Enables or disables event handling.  This implementation updates enabled.

isHideOnHover

mxTooltipHandler.prototype.isHideOnHover = function()

Returns hideOnHover.

setHideOnHover

mxTooltipHandler.prototype.setHideOnHover = function(value)

Sets hideOnHover.

init

mxTooltipHandler.prototype.init = function()

Initializes the DOM nodes required for this tooltip handler.

getStateForEvent

mxTooltipHandler.prototype.getStateForEvent = function(me)

Returns the mxCellState to be used for showing a tooltip for this event.

mouseDown

mxTooltipHandler.prototype.mouseDown = function(sender,
me)

Handles the event by initiating a rubberband selection.  By consuming the event all subsequent events of the gesture are redirected to this handler.

mouseMove

mxTooltipHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the rubberband selection.

mouseUp

mxTooltipHandler.prototype.mouseUp = function(sender,
me)

Handles the event by resetting the tooltip timer or hiding the existing tooltip.

resetTimer

mxTooltipHandler.prototype.resetTimer = function()

Resets the timer.

reset

mxTooltipHandler.prototype.reset = function(me,
restart,
state)

Resets and/or restarts the timer to trigger the display of the tooltip.

hide

mxTooltipHandler.prototype.hide = function()

Hides the tooltip and resets the timer.

hideTooltip

mxTooltipHandler.prototype.hideTooltip = function()

Hides the tooltip.

show

mxTooltipHandler.prototype.show = function(tip,
x,
y)

Shows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).

destroy

mxTooltipHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxCellTracker

Event handler that highlights cells.  Inherits from mxCellMarker.

Example

new mxCellTracker(graph, '#00FF00');

For detecting dragEnter, dragOver and dragLeave on cells, the following code can be used:

graph.addMouseListener(
{
  cell: null,
  mouseDown: function(sender, me) { },
  mouseMove: function(sender, me)
  {
    var tmp = me.getCell();

    if (tmp != this.cell)
    {
      if (this.cell != null)
      {
        this.dragLeave(me.getEvent(), this.cell);
      }

      this.cell = tmp;

      if (this.cell != null)
      {
        this.dragEnter(me.getEvent(), this.cell);
      }
    }

    if (this.cell != null)
    {
      this.dragOver(me.getEvent(), this.cell);
    }
  },
  mouseUp: function(sender, me) { },
  dragEnter: function(evt, cell)
  {
    mxLog.debug('dragEnter', cell.value);
  },
  dragOver: function(evt, cell)
  {
    mxLog.debug('dragOver', cell.value);
  },
  dragLeave: function(evt, cell)
  {
    mxLog.debug('dragLeave', cell.value);
  }
});
Summary
Functions
mxCellTrackerConstructs an event handler that highlights cells.
mouseDownIgnores the event.
mouseMoveHandles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.
mouseUpHandles the event by reseting the highlight.
destroyDestroys the object and all its resources and DOM nodes.

Functions

mxCellTracker

function mxCellTracker(graph,
color,
funct)

Constructs an event handler that highlights cells.

Parameters

graphReference to the enclosing mxGraph.
colorColor of the highlight.  Default is blue.
functOptional JavaScript function that is used to override mxCellMarker.getCell.

mouseDown

mxCellTracker.prototype.mouseDown = function(sender,
me)

Ignores the event.  The event is not consumed.

mouseMove

mxCellTracker.prototype.mouseMove = function(sender,
me)

Handles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.

mouseUp

mxCellTracker.prototype.mouseUp = function(sender,
me)

Handles the event by reseting the highlight.

destroy

mxCellTracker.prototype.destroy = function()

Destroys the object and all its resources and DOM nodes.  This doesn’t normally need to be called.  It is called automatically when the window unloads.

mxCellHighlight

A helper class to highlight cells.  Here is an example for a given cell.

var highlight = new mxCellHighlight(graph, '#ff0000', 2);
highlight.highlight(graph.view.getState(cell)));
Summary
Functions
mxCellHighlightConstructs a cell highlight.
Variables
keepOnTopSpecifies if the highlights should appear on top of everything else in the overlay pane.
graphReference to the enclosing mxGraph.
stateReference to the mxCellState.
spacingSpecifies the spacing between the highlight for vertices and the vertex.
resetHandlerHolds the handler that automatically invokes reset if the highlight should be hidden.
Functions
setHighlightColorSets the color of the rectangle used to highlight drop targets.
drawHighlightCreates and returns the highlight shape for the given state.
createShapeCreates and returns the highlight shape for the given state.
repaintUpdates the highlight after a change of the model or view.
repaintUpdates the highlight after a change of the model or view.
hideResets the state of the cell marker.
markMarks the <markedState> and fires a mark event.
isHighlightAtReturns true if this highlight is at the given position.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxCellHighlight

function mxCellHighlight(graph,
highlightColor,
strokeWidth,
dashed)

Constructs a cell highlight.

Variables

keepOnTop

mxCellHighlight.prototype.keepOnTop

Specifies if the highlights should appear on top of everything else in the overlay pane.  Default is false.

graph

mxCellHighlight.prototype.graph

Reference to the enclosing mxGraph.

state

mxCellHighlight.prototype.state

Reference to the mxCellState.

spacing

mxCellHighlight.prototype.spacing

Specifies the spacing between the highlight for vertices and the vertex.  Default is 2.

resetHandler

mxCellHighlight.prototype.resetHandler

Holds the handler that automatically invokes reset if the highlight should be hidden.

Functions

setHighlightColor

mxCellHighlight.prototype.setHighlightColor = function(color)

Sets the color of the rectangle used to highlight drop targets.

Parameters

colorString that represents the new highlight color.

drawHighlight

mxCellHighlight.prototype.drawHighlight = function()

Creates and returns the highlight shape for the given state.

createShape

mxCellHighlight.prototype.createShape = function()

Creates and returns the highlight shape for the given state.

repaint

Updates the highlight after a change of the model or view.

repaint

mxCellHighlight.prototype.repaint = function()

Updates the highlight after a change of the model or view.

hide

mxCellHighlight.prototype.hide = function()

Resets the state of the cell marker.

mark

Marks the <markedState> and fires a mark event.

isHighlightAt

mxCellHighlight.prototype.isHighlightAt = function(x,
y)

Returns true if this highlight is at the given position.

destroy

mxCellHighlight.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxDefaultKeyHandler

Binds keycodes to actionnames in an editor.  This aggregates an internal handler and extends the implementation of mxKeyHandler.escape to not only cancel the editing, but also hide the properties dialog and fire an <mxEditor.escape> event via editor.  An instance of this class is created by mxEditor and stored in mxEditor.keyHandler.

Example

Bind the delete key to the delete action in an existing editor.

var keyHandler = new mxDefaultKeyHandler(editor);
keyHandler.bindAction(46, 'delete');

Codec

This class uses the mxDefaultKeyHandlerCodec to read configuration data into an existing instance.  See mxDefaultKeyHandlerCodec for a description of the configuration format.

Keycodes

See mxKeyHandler.

An mxEvent.ESCAPE event is fired via the editor if the escape key is pressed.

Summary
Functions
mxDefaultKeyHandlerConstructs a new default key handler for the mxEditor.graph in the given mxEditor.
Variables
editorReference to the enclosing mxEditor.
handlerHolds the mxKeyHandler for key event handling.
Functions
bindActionBinds the specified keycode to the given action in editor.
destroyDestroys the handler associated with this object.

Functions

mxDefaultKeyHandler

function mxDefaultKeyHandler(editor)

Constructs a new default key handler for the mxEditor.graph in the given mxEditor.  (The editor may be null if a prototypical instance for a mxDefaultKeyHandlerCodec is created.)

Parameters

editorReference to the enclosing mxEditor.

Variables

editor

mxDefaultKeyHandler.prototype.editor

Reference to the enclosing mxEditor.

handler

mxDefaultKeyHandler.prototype.handler

Holds the mxKeyHandler for key event handling.

Functions

bindAction

mxDefaultKeyHandler.prototype.bindAction = function (code,
action,
control)

Binds the specified keycode to the given action in editor.  The optional control flag specifies if the control key must be pressed to trigger the action.

Parameters

codeInteger that specifies the keycode.
actionName of the action to execute in editor.
controlOptional boolean that specifies if control must be pressed.  Default is false.

destroy

mxDefaultKeyHandler.prototype.destroy = function ()

Destroys the handler associated with this object.  This does normally not need to be called, the handler is destroyed automatically when the window unloads (in IE) by mxEditor.

mxDefaultPopupMenu

Creates popupmenus for mouse events.  This object holds an XML node which is a description of the popup menu to be created.  In createMenu, the configuration is applied to the context and the resulting menu items are added to the menu dynamically.  See createMenu for a description of the configuration format.

This class does not create the DOM nodes required for the popup menu, it only parses an XML description to invoke the respective methods on an mxPopupMenu each time the menu is displayed.

Codec

This class uses the mxDefaultPopupMenuCodec to read configuration data into an existing instance, however, the actual parsing is done by this class during program execution, so the format is described below.

Summary
Functions
mxDefaultPopupMenuConstructs a new popupmenu-factory based on given configuration.
Variables
imageBasePathBase path for all icon attributes in the config.
configXML node used as the description of new menu items.
Functions
createMenuThis function is called from mxEditor to add items to the given menu based on config.
addItemsRecursively adds the given items and all of its children into the given menu.
addActionHelper method to bind an action to a new menu item.
createConditionsEvaluates the default conditions for the given context.

Functions

mxDefaultPopupMenu

function mxDefaultPopupMenu(config)

Constructs a new popupmenu-factory based on given configuration.

Paramaters

configXML node that contains the configuration data.

Variables

imageBasePath

mxDefaultPopupMenu.prototype.imageBasePath

Base path for all icon attributes in the config.  Default is null.

config

mxDefaultPopupMenu.prototype.config

XML node used as the description of new menu items.  This node is used in createMenu to dynamically create the menu items if their respective conditions evaluate to true for the given arguments.

Functions

createMenu

mxDefaultPopupMenu.prototype.createMenu = function(editor,
menu,
cell,
evt)

This function is called from mxEditor to add items to the given menu based on config.  The config is a sequence of the following nodes and attributes.

Child Nodes

addAdds a new menu item.  See below for attributes.
separatorAdds a separator.  No attributes.
conditionAdds a custom condition.  Name attribute.

The add-node may have a child node that defines a function to be invoked before the action is executed (or instead of an action to be executed).

Attributes

asResource key for the label (needs entry in property file).
actionName of the action to execute in enclosing editor.
iconOptional icon (relative/absolute URL).
iconClsOptional CSS class for the icon.
ifOptional name of condition that must be true (see below).
enabled-ifOptional name of condition that specifies if the menu item should be enabled.
nameName of custom condition.  Only for condition nodes.

Conditions

nocellNo cell under the mouse.
ncellsMore than one cell selected.
notRootDrilling position is other than home.
cellCell under the mouse.
notEmptyExactly one cell with children under mouse.
expandableExactly one expandable cell under mouse.
collapsableExactly one collapsable cell under mouse.
validRootExactly one cell which is a possible root under mouse.
swimlaneExactly one cell which is a swimlane under mouse.

Example

To add a new item for a given action to the popupmenu

<mxDefaultPopupMenu as="popupHandler">
  <add as="delete" action="delete" icon="images/delete.gif" if="cell"/>
</mxDefaultPopupMenu>

To add a new item for a custom function

<mxDefaultPopupMenu as="popupHandler">
  <add as="action1"><![CDATA[
     function (editor, cell, evt)
     {
         editor.execute('action1', cell, 'myArg');
     }
  ]]></add>
</mxDefaultPopupMenu>

The above example invokes action1 with an additional third argument via the editor instance.  The third argument is passed to the function that defines action1.  If the add-node has no action-attribute, then only the function defined in the text content is executed, otherwise first the function and then the action defined in the action-attribute is executed.  The function in the text content has 3 arguments, namely the mxEditor instance, the mxCell instance under the mouse, and the native mouse event.

Custom Conditions

To add a new condition for popupmenu items

<condition name="condition1"><![CDATA[
  function (editor, cell, evt)
  {
    return cell != null;
  }
]]></condition>

The new condition can then be used in any item as follows

<add as="action1" action="action1" icon="action1.gif" if="condition1"/>

The order in which the items and conditions appear is not significant as all connditions are evaluated before any items are created.

Parameters

editorEnclosing mxEditor instance.
menumxPopupMenu that is used for adding items and separators.
cellOptional mxCell which is under the mousepointer.
evtOptional mouse event which triggered the menu.

addItems

mxDefaultPopupMenu.prototype.addItems = function(editor,
menu,
cell,
evt,
conditions,
item,
parent)

Recursively adds the given items and all of its children into the given menu.

Parameters

editorEnclosing mxEditor instance.
menumxPopupMenu that is used for adding items and separators.
cellOptional mxCell which is under the mousepointer.
evtOptional mouse event which triggered the menu.
conditionsArray of names boolean conditions.
itemXML node that represents the current menu item.
parentDOM node that represents the parent menu item.

addAction

mxDefaultPopupMenu.prototype.addAction = function(menu,
editor,
lab,
icon,
funct,
action,
cell,
parent,
iconCls,
enabled)

Helper method to bind an action to a new menu item.

Parameters

menumxPopupMenu that is used for adding items and separators.
editorEnclosing mxEditor instance.
labString that represents the label of the menu item.
iconOptional URL that represents the icon of the menu item.
actionOptional name of the action to execute in the given editor.
functOptional function to execute before the optional action.  The function takes an mxEditor, the mxCell under the mouse and the mouse event that triggered the call.
cellOptional mxCell to use as an argument for the action.
parentDOM node that represents the parent menu item.
iconClsOptional CSS class for the menu icon.
enabledOptional boolean that specifies if the menu item is enabled.  Default is true.

createConditions

mxDefaultPopupMenu.prototype.createConditions = function(editor,
cell,
evt)

Evaluates the default conditions for the given context.

mxDefaultToolbar

Toolbar for the editor.  This modifies the state of the graph or inserts new cells upon mouse clicks.

Example

Create a toolbar with a button to copy the selection into the clipboard, and a combo box with one action to paste the selection from the clipboard into the graph.

var toolbar = new mxDefaultToolbar(container, editor);
toolbar.addItem('Copy', null, 'copy');

var combo = toolbar.addActionCombo('More actions...');
toolbar.addActionOption(combo, 'Paste', 'paste');

Codec

This class uses the mxDefaultToolbarCodec to read configuration data into an existing instance.  See mxDefaultToolbarCodec for a description of the configuration format.

Summary
Functions
mxDefaultToolbarConstructs a new toolbar for the given container and editor.
Variables
editorReference to the enclosing mxEditor.
toolbarHolds the internal mxToolbar.
resetHandlerReference to the function used to reset the toolbar.
spacingDefines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell.
connectOnDropSpecifies if elements should be connected if new cells are dropped onto connectable elements.
initConstructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar.
Functions
addItemAdds a new item that executes the given action in editor.
addSeparatorAdds a vertical separator using the optional icon.
addComboHelper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.
addActionComboHelper method to invoke <mxToolbar.addActionCombo> on toolbar using the given title and return the resulting DOM node.
addActionOptionBinds the given action to a option with the specified label in the given combo.
addOptionHelper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.
addModeCreates an item for selecting the given mode in the editor’s graph.
addPrototypeCreates an item for inserting a clone of the specified prototype cell into the editor’s graph.
dropHandles a drop from a toolbar item to the graph.
insertHandles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.
connectHandles a drop by connecting the given vertex to the given source cell.
installDropHandlerMakes the given img draggable using the given function for handling a drop event.
destroyDestroys the toolbar associated with this object and removes all installed listeners.

Functions

mxDefaultToolbar

function mxDefaultToolbar(container,
editor)

Constructs a new toolbar for the given container and editor.  The container and editor may be null if a prototypical instance for a mxDefaultKeyHandlerCodec is created.

Parameters

containerDOM node that contains the toolbar.
editorReference to the enclosing mxEditor.

Variables

editor

mxDefaultToolbar.prototype.editor

Reference to the enclosing mxEditor.

toolbar

mxDefaultToolbar.prototype.toolbar

Holds the internal mxToolbar.

resetHandler

mxDefaultToolbar.prototype.resetHandler

Reference to the function used to reset the toolbar.

spacing

mxDefaultToolbar.prototype.spacing

Defines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell.  Default is 4 (40 pixels).

connectOnDrop

mxDefaultToolbar.prototype.connectOnDrop

Specifies if elements should be connected if new cells are dropped onto connectable elements.  Default is false.

init

mxDefaultToolbar.prototype.init

Constructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar.  This assumes that editor is not null.

Parameters

containerDOM node that contains the toolbar.

Functions

addItem

mxDefaultToolbar.prototype.addItem = function(title,
icon,
action,
pressed)

Adds a new item that executes the given action in editor.  The title, icon and pressedIcon are used to display the toolbar item.

Parameters

titleString that represents the title (tooltip) for the item.
iconURL of the icon to be used for displaying the item.
actionName of the action to execute when the item is clicked.
pressedOptional URL of the icon for the pressed state.

addSeparator

mxDefaultToolbar.prototype.addSeparator = function(icon)

Adds a vertical separator using the optional icon.

Parameters

iconOptional URL of the icon that represents the vertical separator.  Default is mxClient.imageBasePath + ‘/separator.gif’.

addCombo

mxDefaultToolbar.prototype.addCombo = function()

Helper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.

addActionCombo

mxDefaultToolbar.prototype.addActionCombo = function(title)

Helper method to invoke <mxToolbar.addActionCombo> on toolbar using the given title and return the resulting DOM node.

Parameters

titleString that represents the title of the combo.

addActionOption

mxDefaultToolbar.prototype.addActionOption = function(combo,
title,
action)

Binds the given action to a option with the specified label in the given combo.  Combo is an object returned from an earlier call to addCombo or addActionCombo.

Parameters

comboDOM node that represents the combo box.
titleString that represents the title of the combo.
actionName of the action to execute in editor.

addOption

mxDefaultToolbar.prototype.addOption = function(combo,
title,
value)

Helper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.

Parameters

comboDOM node that represents the combo box.
titleString that represents the title of the combo.
valueObject that represents the value of the option.

addMode

mxDefaultToolbar.prototype.addMode = function(title,
icon,
mode,
pressed,
funct)

Creates an item for selecting the given mode in the editor’s graph.  Supported modenames are select, connect and pan.

Parameters

titleString that represents the title of the item.
iconURL of the icon that represents the item.
modeString that represents the mode name to be used in mxEditor.setMode.
pressedOptional URL of the icon that represents the pressed state.
functOptional JavaScript function that takes the mxEditor as the first and only argument that is executed after the mode has been selected.

addPrototype

mxDefaultToolbar.prototype.addPrototype = function(title,
icon,
ptype,
pressed,
insert,
toggle)

Creates an item for inserting a clone of the specified prototype cell into the editor’s graph.  The ptype may either be a cell or a function that returns a cell.

Parameters

titleString that represents the title of the item.
iconURL of the icon that represents the item.
ptypeFunction or object that represents the prototype cell.  If ptype is a function then it is invoked with no arguments to create new instances.
pressedOptional URL of the icon that represents the pressed state.
insertOptional JavaScript function that handles an insert of the new cell.  This function takes the mxEditor, new cell to be inserted, mouse event and optional mxCell under the mouse pointer as arguments.
toggleOptional boolean that specifies if the item can be toggled.  Default is true.

drop

mxDefaultToolbar.prototype.drop = function(vertex,
evt,
target)

Handles a drop from a toolbar item to the graph.  The given vertex represents the new cell to be inserted.  This invokes insert or connect depending on the given target cell.

Parameters

vertexmxCell to be inserted.
evtMouse event that represents the drop.
targetOptional mxCell that represents the drop target.

insert

mxDefaultToolbar.prototype.insert = function(vertex,
evt,
target)

Handles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.

Parameters

vertexmxCell to be inserted.
evtMouse event that represents the drop.
parentOptional mxCell that represents the parent.

connect

mxDefaultToolbar.prototype.connect = function(vertex,
evt,
source)

Handles a drop by connecting the given vertex to the given source cell.

vertexmxCell to be inserted.
evtMouse event that represents the drop.
sourceOptional mxCell that represents the source terminal.

installDropHandler

mxDefaultToolbar.prototype.installDropHandler = function (img,
dropHandler)

Makes the given img draggable using the given function for handling a drop event.

Parameters

imgDOM node that represents the image.
dropHandlerFunction that handles a drop of the image.

destroy

mxDefaultToolbar.prototype.destroy = function ()

Destroys the toolbar associated with this object and removes all installed listeners.  This does normally not need to be called, the toolbar is destroyed automatically when the window unloads (in IE) by mxEditor.

mxEditor

Extends mxEventSource to implement a application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg. properties, help, outline, toolbar, and popupmenu.  It also adds templates to be used as cells in toolbars, auto-validation using the <validation> flag, attribute cycling using cycleAttributeValues, higher-level events such as <root>, and backend integration using urlPost and urlImage.

Actions

Actions are functions stored in the actions array under their names.  The functions take the mxEditor as the first, and an optional mxCell as the second argument and are invoked using execute.  Any additional arguments passed to execute are passed on to the action as-is.

A list of built-in actions is available in the addActions description.

Read/write Diagrams

To read a diagram from an XML string, for example from a textfield within the page, the following code is used:

var doc = mxUtils.parseXML(xmlString);
var node = doc.documentElement;
editor.readGraphModel(node);

For reading a diagram from a remote location, use the open method.

To save diagrams in XML on a server, you can set the urlPost variable.  This variable will be used in getUrlPost to construct a URL for the post request that is issued in the save method.  The post request contains the XML representation of the diagram as returned by writeGraphModel in the xml parameter.

On the server side, the post request is processed using standard technologies such as Java Servlets, CGI, .NET or ASP.

Here are some examples of processing a post request in various languages.

  • Java: URLDecoder.decode(request.getParameter(“xml”), “UTF-8”).replace(“\n”, “&#xa;”)

Note that the linefeeds should only be replaced if the XML is processed in Java, for example when creating an image, but not if the XML is passed back to the client-side.

  • .NET: HttpUtility.UrlDecode(context.Request.Params[“xml”])
  • PHP: urldecode($_POST[“xml”])

Creating images

A backend (Java, PHP or C#) is required for creating images.  The distribution contains an example for each backend (ImageHandler.java, ImageHandler.cs and graph.php).  More information about using a backend to create images can be found in the readme.html files.  Note that the preview is implemented using VML/SVG in the browser and does not require a backend.  The backend is only required to creates images (bitmaps).

Special characters

Note There are five characters that should always appear in XML content as escapes, so that they do not interact with the syntax of the markup.  These are part of the language for all documents based on XML and for HTML.

  • &lt; (<)
  • &gt; (>)
  • &amp; (&)
  • &quot; (“)
  • &apos; (‘)

Although it is part of the XML language, &apos; is not defined in HTML.  For this reason the XHTML specification recommends instead the use of &#39; if text may be passed to a HTML user agent.

If you are having problems with special characters on the server-side then you may want to try the escapePostData flag.

For converting decimal escape sequences inside strings, a user has provided us with the following function:

function html2js(text)
{
  var entitySearch = /&#[0-9]+;/;
  var entity;

  while (entity = entitySearch.exec(text))
  {
    var charCode = entity[0].substring(2, entity[0].length -1);
    text = text.substring(0, entity.index)
           + String.fromCharCode(charCode)
           + text.substring(entity.index + entity[0].length);
  }

  return text;
}

Otherwise try using hex escape sequences and the built-in unescape function for converting such strings.

Local Files

For saving and opening local files, no standardized method exists that works across all browsers.  The recommended way of dealing with local files is to create a backend that streams the XML data back to the browser (echo) as an attachment so that a Save-dialog is displayed on the client-side and the file can be saved to the local disk.

For example, in PHP the code that does this looks as follows.

$xml = stripslashes($_POST["xml"]);
header("Content-Disposition: attachment; filename=\"diagram.xml\"");
echo($xml);

To open a local file, the file should be uploaded via a form in the browser and then opened from the server in the editor.

Cell Properties

The properties displayed in the properties dialog are the attributes and values of the cell’s user object, which is an XML node.  The XML node is defined in the templates section of the config file.

The templates are stored in mxEditor.templates and contain cells which are cloned at insertion time to create new vertices by use of drag and drop from the toolbar.  Each entry in the toolbar for adding a new vertex must refer to an existing template.

In the following example, the task node is a business object and only the mxCell node and its mxGeometry child contain graph information:

<Task label="Task" description="">
  <mxCell vertex="true">
    <mxGeometry as="geometry" width="72" height="32"/>
  </mxCell>
</Task>

The idea is that the XML representation is inverse from the in-memory representation: The outer XML node is the user object and the inner node is the cell.  This means the user object of the cell is the Task node with no children for the above example:

<Task label="Task" description=""/>

The Task node can have any tag name, attributes and child nodes.  The mxCodec will use the XML hierarchy as the user object, while removing the “known annotations”, such as the mxCell node.  At save-time the cell data will be “merged” back into the user object.  The user object is only modified via the properties dialog during the lifecycle of the cell.

In the default implementation of createProperties, the user object’s attributes are put into a form for editing.  Attributes are changed using the mxCellAttributeChange action in the model.  The dialog can be replaced by overriding the createProperties hook or by replacing the showProperties action in actions.  Alternatively, the entry in the config file’s popupmenu section can be modified to invoke a different action.

If you want to displey the properties dialog on a doubleclick, you can set mxEditor.dblClickAction to showProperties as follows:

editor.dblClickAction = 'showProperties';

Popupmenu and Toolbar

The toolbar and popupmenu are typically configured using the respective sections in the config file, that is, the popupmenu is defined as follows:

<mxEditor>
  <mxDefaultPopupMenu as="popupHandler">
     <add as="cut" action="cut" icon="images/cut.gif"/>
     ...

New entries can be added to the toolbar by inserting an add-node into the above configuration.  Existing entries may be removed and changed by modifying or removing the respective entries in the configuration.  The configuration is read by the mxDefaultPopupMenuCodec, the format of the configuration is explained in <mxDefaultPopupMenu.decode>.

The toolbar is defined in the mxDefaultToolbar section.  Items can be added and removed in this section.

<mxEditor>
  <mxDefaultToolbar>
    <add as="save" action="save" icon="images/save.gif"/>
    <add as="Swimlane" template="swimlane" icon="images/swimlane.gif"/>
    ...

The format of the configuration is described in mxDefaultToolbarCodec.decode.

Ids

For the IDs, there is an implicit behaviour in mxCodec: It moves the Id from the cell to the user object at encoding time and vice versa at decoding time.  For example, if the Task node from above has an id attribute, then the mxCell.id of the corresponding cell will have this value.  If there is no Id collision in the model, then the cell may be retrieved using this Id with the mxGraphModel.getCell function.  If there is a collision, a new Id will be created for the cell using mxGraphModel.createId.  At encoding time, this new Id will replace the value previously stored under the id attribute in the Task node.

See mxEditorCodec, mxDefaultToolbarCodec and mxDefaultPopupMenuCodec for information about configuring the editor and user interface.

Programmatically inserting cells

For inserting a new cell, say, by clicking a button in the document, the following code can be used.  This requires an reference to the editor.

var userObject = new Object();
var parent = editor.graph.getDefaultParent();
var model = editor.graph.model;
model.beginUpdate();
try
{
  editor.graph.insertVertex(parent, null, userObject, 20, 20, 80, 30);
}
finally
{
  model.endUpdate();
}

If a template cell from the config file should be inserted, then a clone of the template can be created as follows.  The clone is then inserted using the add function instead of addVertex.

var template = editor.templates['task'];
var clone = editor.graph.model.cloneCell(template);

Resources

resources/editorLanguage resources for mxEditor
Summary
onInitCalled from within the constructor.
mxgraph=seenSet when the editor is started.
mxEvent.OPENFires after a file was opened in open.
mxEvent.SAVEFires after the current file was saved in save.
mxEvent.POSTFires if a successful response was received in postDiagram.
mxEvent.ROOTFires when the current root has changed, or when the title of the current root has changed.
mxEvent.BEFORE_ADD_VERTEXFires before a vertex is added in addVertex.
mxEvent.ADD_VERTEXFires between begin- and endUpdate in addVertex.
mxEvent.AFTER_ADD_VERTEXFires after a vertex was inserted and selected in addVertex.
mxEvent.ESCAPEFires when the escape key is pressed.
mxEditorConstructs a new editor.
Controls and Handlers
askZoomResourceSpecifies the resource key for the zoom dialog.
lastSavedResourceSpecifies the resource key for the last saved info.
currentFileResourceSpecifies the resource key for the current file info.
propertiesResourceSpecifies the resource key for the properties window title.
tasksResourceSpecifies the resource key for the tasks window title.
helpResourceSpecifies the resource key for the help window title.
outlineResourceSpecifies the resource key for the outline window title.
outlineReference to the mxWindow that contains the outline.
graphHolds a mxGraph for displaying the diagram.
graphRenderHintHolds the render hint used for creating the graph in setGraphContainer.
toolbarHolds a mxDefaultToolbar for displaying the toolbar.
statusDOM container that holds the statusbar.
popupHandlerHolds a mxDefaultPopupMenu for displaying popupmenus.
undoManagerHolds an mxUndoManager for the command history.
keyHandlerHolds a mxDefaultKeyHandler for handling keyboard events.
Actions and Options
actionsMaps from actionnames to actions, which are functions taking the editor and the cell as arguments.
dblClickActionSpecifies the name of the action to be executed when a cell is double clicked.
swimlaneRequiredSpecifies if new cells must be inserted into an existing swimlane.
disableContextMenuSpecifies if the context menu should be disabled in the graph container.
Templates
insertFunctionSpecifies the function to be used for inserting new cells into the graph.
forcedInsertingSpecifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected.
templatesMaps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
defaultEdgePrototype edge cell that is used for creating new edges.
defaultEdgeStyleSpecifies the edge style to be returned in getEdgeStyle.
defaultGroupPrototype group cell that is used for creating new groups.
groupBorderSizeDefault size for the border of new groups.
Backend Integration
filenameContains the URL of the last opened file as a string.
lineFeedCharacter to be used for encoding linefeeds in save.
postParameterNameSpecifies if the name of the post parameter that contains the diagram data in a post request to the server.
escapePostDataSpecifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
urlPostSpecifies the URL to be used for posting the diagram to a backend in save.
urlImageSpecifies the URL to be used for creating a bitmap of the graph in the image action.
Autolayout
horizontalFlowSpecifies the direction of the flow in the diagram.
layoutDiagramSpecifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.
swimlaneSpacingSpecifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
maintainSwimlanesSpecifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
layoutSwimlanesSpecifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
Attribute Cycling
cycleAttributeValuesSpecifies the attribute values to be cycled when inserting new swimlanes.
cycleAttributeIndexIndex of the last consumed attribute index.
cycleAttributeNameName of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
Windows
tasksHolds the mxWindow created in showTasks.
tasksWindowImageIcon for the tasks window.
tasksTopSpecifies the top coordinate of the tasks window in pixels.
helpHolds the mxWindow created in showHelp.
helpWindowImageIcon for the help window.
urlHelpSpecifies the URL to be used for the contents of the Online Help window.
helpWidthSpecifies the width of the help window in pixels.
helpHeightSpecifies the height of the help window in pixels.
propertiesWidthSpecifies the width of the properties window in pixels.
propertiesHeightSpecifies the height of the properties window in pixels.
movePropertiesDialogSpecifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
validatingSpecifies if mxGraph.validateGraph should automatically be invoked after each change.
modifiedTrue if the graph has been modified since it was last saved.
isModifiedReturns modified.
setModifiedSets modified to the specified boolean value.
addActionsAdds the built-in actions to the editor instance.
configureConfigures the editor using the specified node.
resetFirstTimeResets the cookie that is used to remember if the editor has already been used.
resetHistoryResets the command history, modified state and counters.
addActionBinds the specified actionname to the specified function.
executeExecutes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
addTemplateAdds the specified template under the given name in templates.
getTemplateReturns the template for the given name.
createGraphCreates the graph for the editor.
createSwimlaneManagerSets the graph’s container using mxGraph.init.
createLayoutManagerCreates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
setGraphContainerSets the graph’s container using mxGraph.init.
installDblClickHandlerOverrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
installUndoHandlerAdds the undoManager to the graph model and the view.
installDrillHandlerInstalls listeners for dispatching the <root> event.
installChangeHandlerInstalls the listeners required to automatically validate the graph.
installInsertHandlerInstalls the handler for invoking insertFunction if one is defined.
createDiagramLayoutCreates the layout instance used to layout the swimlanes in the diagram.
createSwimlaneLayoutCreates the layout instance used to layout the children of each swimlane.
createToolbarCreates the toolbar with no container.
setToolbarContainerInitializes the toolbar for the given container.
setStatusContainerCreates the status using the specified container.
setStatusDisplay the specified message in the status bar.
setTitleContainerCreates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
treeLayoutExecutes a vertical or horizontal compact tree layout using the specified cell as an argument.
getTitleReturns the string value for the current root of the diagram.
getRootTitleReturns the string value of the root cell in mxGraph.model.
undoUndo the last change in graph.
redoRedo the last change in graph.
groupCellsInvokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
createGroupCreates and returns a clone of defaultGroup to be used as a new group cell in <group>.
openOpens the specified file synchronously and parses it using readGraphModel.
readGraphModelReads the specified XML node into the existing graph model and resets the command history and modified state.
savePosts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
postDiagramHook for subclassers to override the posting of a diagram represented by the given node to the given URL.
writeGraphModelHook to create the string representation of the diagram.
getUrlPostReturns the URL to post the diagram to.
getUrlImageReturns the URL to create the image with.
swapStylesSwaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
showPropertiesCreates and shows the properties dialog for the given cell.
isPropertiesVisibleReturns true if the properties dialog is currently visible.
createPropertiesCreates and returns the DOM node that represents the contents of the properties dialog for the given cell.
hidePropertiesHides the properties dialog.
showTasksShows the tasks window.
refreshTasksUpdates the contents of the tasks window using createTasks.
createTasksUpdates the contents of the given DOM node to display the tasks associated with the current editor state.
showHelpShows the help window.
showOutlineShows the outline window.
setModePuts the graph into the specified mode.
createPopupMenuUses popupHandler to create the menu in the graph’s panning handler.
createEdgeUses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
getEdgeStyleReturns a string identifying the style of new edges.
consumeCycleAttributeReturns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
cycleAttributeUses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
addVertexAdds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
destroyRemoves the editor and all its associated resources.

onInit

Called from within the constructor.  In the callback, “this” refers to the editor instance.

mxgraph=seen

Set when the editor is started.  Never expires.  Use resetFirstTime to reset this cookie.  This cookie only exists if onInit is implemented.

mxEvent.OPEN

Fires after a file was opened in open.  The <code>filename</code> property contains the filename that was used.  The same value is also available in filename.

mxEvent.SAVE

Fires after the current file was saved in save.  The <code>url</code> property contains the URL that was used for saving.

mxEvent.POST

Fires if a successful response was received in postDiagram.  The <code>request</code> property contains the mxXmlRequest, the <code>url</code> and <code>data</code> properties contain the URL and the data that were used in the post request.

mxEvent.ROOT

Fires when the current root has changed, or when the title of the current root has changed.  This event has no properties.

mxEvent.BEFORE_ADD_VERTEX

Fires before a vertex is added in addVertex.  The <code>vertex</code> property contains the new vertex and the <code>parent</code> property contains its parent.

mxEvent.ADD_VERTEX

Fires between begin- and endUpdate in addVertex.  The <code>vertex</code> property contains the vertex that is being inserted.

mxEvent.AFTER_ADD_VERTEX

Fires after a vertex was inserted and selected in addVertex.  The <code>vertex</code> property contains the new vertex.

Example

For starting an in-place edit after a new vertex has been added to the graph, the following code can be used.

editor.addListener(mxEvent.AFTER_ADD_VERTEX, function(sender, evt)
{
  var vertex = evt.getProperty('vertex');

  if (editor.graph.isCellEditable(vertex))
  {
     editor.graph.startEditingAtCell(vertex);
  }
});

mxEvent.ESCAPE

Fires when the escape key is pressed.  The <code>event</code> property contains the key event.

mxEditor

function mxEditor(config)

Constructs a new editor.  This function invokes the onInit callback upon completion.

Example

var config = mxUtils.load('config/diagrameditor.xml').getDocumentElement();
var editor = new mxEditor(config);

Parameters

configOptional XML node that contains the configuration.

Controls and Handlers

askZoomResource

mxEditor.prototype.askZoomResource

Specifies the resource key for the zoom dialog.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘askZoom’.

lastSavedResource

mxEditor.prototype.lastSavedResource

Specifies the resource key for the last saved info.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘lastSaved’.

currentFileResource

mxEditor.prototype.currentFileResource

Specifies the resource key for the current file info.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘lastSaved’.

propertiesResource

mxEditor.prototype.propertiesResource

Specifies the resource key for the properties window title.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘properties’.

tasksResource

mxEditor.prototype.tasksResource

Specifies the resource key for the tasks window title.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘tasks’.

helpResource

mxEditor.prototype.helpResource

Specifies the resource key for the help window title.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘help’.

outlineResource

mxEditor.prototype.outlineResource

Specifies the resource key for the outline window title.  If the resource for this key does not exist then the value is used as the error message.  Default is ‘outline’.

outline

mxEditor.prototype.outline

Reference to the mxWindow that contains the outline.  The mxOutline is stored in outline.outline.

graph

mxEditor.prototype.graph

Holds a mxGraph for displaying the diagram.  The graph is created in setGraphContainer.

graphRenderHint

mxEditor.prototype.graphRenderHint

Holds the render hint used for creating the graph in setGraphContainer.  See mxGraph.  Default is null.

toolbar

mxEditor.prototype.toolbar

Holds a mxDefaultToolbar for displaying the toolbar.  The toolbar is created in setToolbarContainer.

status

mxEditor.prototype.status

DOM container that holds the statusbar.  Default is null.  Use setStatusContainer to set this value.

popupHandler

mxEditor.prototype.popupHandler

Holds a mxDefaultPopupMenu for displaying popupmenus.

undoManager

mxEditor.prototype.undoManager

Holds an mxUndoManager for the command history.

keyHandler

mxEditor.prototype.keyHandler

Holds a mxDefaultKeyHandler for handling keyboard events.  The handler is created in setGraphContainer.

Actions and Options

actions

mxEditor.prototype.actions

Maps from actionnames to actions, which are functions taking the editor and the cell as arguments.  Use addAction to add or replace an action and execute to execute an action by name, passing the cell to be operated upon as the second argument.

dblClickAction

mxEditor.prototype.dblClickAction

Specifies the name of the action to be executed when a cell is double clicked.  Default is edit.

To handle a singleclick, use the following code.

editor.graph.addListener(mxEvent.CLICK, function(sender, evt)
{
  var e = evt.getProperty('event');
  var cell = evt.getProperty('cell');

  if (cell != null && !e.isConsumed())
  {
    // Do something useful with cell...
    e.consume();
  }
});

swimlaneRequired

mxEditor.prototype.swimlaneRequired

Specifies if new cells must be inserted into an existing swimlane.  Otherwise, cells that are not swimlanes can be inserted as top-level cells.  Default is false.

disableContextMenu

mxEditor.prototype.disableContextMenu

Specifies if the context menu should be disabled in the graph container.  Default is true.

Templates

insertFunction

mxEditor.prototype.insertFunction

Specifies the function to be used for inserting new cells into the graph.  This is assigned from the mxDefaultToolbar if a vertex-tool is clicked.

forcedInserting

mxEditor.prototype.forcedInserting

Specifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected.  Default is false.

templates

mxEditor.prototype.templates

Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.

defaultEdge

mxEditor.prototype.defaultEdge

Prototype edge cell that is used for creating new edges.

defaultEdgeStyle

mxEditor.prototype.defaultEdgeStyle

Specifies the edge style to be returned in getEdgeStyle.  Default is null.

defaultGroup

mxEditor.prototype.defaultGroup

Prototype group cell that is used for creating new groups.

groupBorderSize

mxEditor.prototype.groupBorderSize

Default size for the border of new groups.  If null, then then mxGraph.gridSize is used.  Default is null.

Backend Integration

filename

mxEditor.prototype.filename

Contains the URL of the last opened file as a string.  Default is null.

lineFeed

Character to be used for encoding linefeeds in save.  Default is ‘&#xa;’.

postParameterName

mxEditor.prototype.postParameterName

Specifies if the name of the post parameter that contains the diagram data in a post request to the server.  Default is xml.

escapePostData

mxEditor.prototype.escapePostData

Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.  Default is true.

urlPost

mxEditor.prototype.urlPost

Specifies the URL to be used for posting the diagram to a backend in save.

urlImage

mxEditor.prototype.urlImage

Specifies the URL to be used for creating a bitmap of the graph in the image action.

Autolayout

horizontalFlow

mxEditor.prototype.horizontalFlow

Specifies the direction of the flow in the diagram.  This is used in the layout algorithms.  Default is false, ie. vertical flow.

layoutDiagram

mxEditor.prototype.layoutDiagram

Specifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.  The spacing between the swimlanes is specified by swimlaneSpacing.  Default is false.

If the top-level elements are swimlanes, then the intra-swimlane layout is activated by the layoutSwimlanes switch.

swimlaneSpacing

mxEditor.prototype.swimlaneSpacing

Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.  Default is 0.

maintainSwimlanes

mxEditor.prototype.maintainSwimlanes

Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.  Default is false.

For horizontal flows, all swimlanes have the same height and for vertical flows, all swimlanes have the same width.  Furthermore, the swimlanes are automatically “stacked” if layoutDiagram is true.

layoutSwimlanes

mxEditor.prototype.layoutSwimlanes

Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.  Default is false.

Attribute Cycling

cycleAttributeValues

mxEditor.prototype.cycleAttributeValues

Specifies the attribute values to be cycled when inserting new swimlanes.  Default is an empty array.

cycleAttributeIndex

mxEditor.prototype.cycleAttributeIndex

Index of the last consumed attribute index.  If a new swimlane is inserted, then the cycleAttributeValues at this index will be used as the value for cycleAttributeName.  Default is 0.

cycleAttributeName

mxEditor.prototype.cycleAttributeName

Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.  Default is fillColor.

Windows

tasks

mxEditor.prototype.tasks

Holds the mxWindow created in showTasks.

tasksWindowImage

mxEditor.prototype.tasksWindowImage

Icon for the tasks window.

tasksTop

mxEditor.prototype.tasksTop

Specifies the top coordinate of the tasks window in pixels.  Default is 20.

help

mxEditor.prototype.help

Holds the mxWindow created in showHelp.

helpWindowImage

mxEditor.prototype.helpWindowImage

Icon for the help window.

urlHelp

mxEditor.prototype.urlHelp

Specifies the URL to be used for the contents of the Online Help window.  This is usually specified in the resources file under urlHelp for language-specific online help support.

helpWidth

mxEditor.prototype.helpWidth

Specifies the width of the help window in pixels.  Default is 300.

helpHeight

mxEditor.prototype.helpHeight

Specifies the height of the help window in pixels.  Default is 260.

propertiesWidth

mxEditor.prototype.propertiesWidth

Specifies the width of the properties window in pixels.  Default is 240.

propertiesHeight

mxEditor.prototype.propertiesHeight

Specifies the height of the properties window in pixels.  If no height is specified then the window will be automatically sized to fit its contents.  Default is null.

movePropertiesDialog

mxEditor.prototype.movePropertiesDialog

Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.  This value is only taken into account if the dialog is already visible.  Default is false.

validating

mxEditor.prototype.validating

Specifies if mxGraph.validateGraph should automatically be invoked after each change.  Default is false.

modified

mxEditor.prototype.modified

True if the graph has been modified since it was last saved.

isModified

mxEditor.prototype.isModified = function ()

Returns modified.

setModified

mxEditor.prototype.setModified = function (value)

Sets modified to the specified boolean value.

addActions

mxEditor.prototype.addActions = function ()

Adds the built-in actions to the editor instance.

saveSaves the graph using urlPost.
printShows the graph in a new print preview window.
showShows the graph in a new window.
exportImageShows the graph as a bitmap image using getUrlImage.
refreshRefreshes the graph’s display.
cutCopies the current selection into the clipboard and removes it from the graph.
copyCopies the current selection into the clipboard.
pastePastes the clipboard into the graph.
deleteRemoves the current selection from the graph.
groupPuts the current selection into a new group.
ungroupRemoves the selected groups and selects the children.
undoUndoes the last change on the graph model.
redoRedoes the last change on the graph model.
zoomSets the zoom via a dialog.
zoomInZooms into the graph.
zoomOutZooms out of the graph
actualSizeResets the scale and translation on the graph.
fitChanges the scale so that the graph fits into the window.
showPropertiesShows the properties dialog.
selectAllSelects all cells.
selectNoneClears the selection.
selectVerticesSelects all vertices. selectEdges = Selects all edges.
editStarts editing the current selection cell.
enterGroupDrills down into the current selection cell.
exitGroupMoves up in the drilling hierachy
homeMoves to the topmost parent in the drilling hierarchy
selectPreviousSelects the previous cell.
selectNextSelects the next cell.
selectParentSelects the parent of the selection cell.
selectChildSelects the first child of the selection cell.
collapseCollapses the currently selected cells.
expandExpands the currently selected cells.
boldToggle bold text style.
italicToggle italic text style.
underlineToggle underline text style.
alignCellsLeftAligns the selection cells at the left.
alignCellsCenterAligns the selection cells in the center.
alignCellsRightAligns the selection cells at the right.
alignCellsTopAligns the selection cells at the top.
alignCellsMiddleAligns the selection cells in the middle.
alignCellsBottomAligns the selection cells at the bottom.
alignFontLeftSets the horizontal text alignment to left.
alignFontCenterSets the horizontal text alignment to center.
alignFontRightSets the horizontal text alignment to right.
alignFontTopSets the vertical text alignment to top.
alignFontMiddleSets the vertical text alignment to middle.
alignFontBottomSets the vertical text alignment to bottom.
toggleTasksShows or hides the tasks window.
toggleHelpShows or hides the help window.
toggleOutlineShows or hides the outline window.
toggleConsoleShows or hides the console window.

configure

mxEditor.prototype.configure = function (node)

Configures the editor using the specified node.  To load the configuration from a given URL the following code can be used to obtain the XML node.

var node = mxUtils.load(url).getDocumentElement();

Parameters

nodeXML node that contains the configuration.

resetFirstTime

mxEditor.prototype.resetFirstTime = function ()

Resets the cookie that is used to remember if the editor has already been used.

resetHistory

mxEditor.prototype.resetHistory = function ()

Resets the command history, modified state and counters.

addAction

mxEditor.prototype.addAction = function (actionname,
funct)

Binds the specified actionname to the specified function.

Parameters

actionnameString that specifies the name of the action to be added.
functFunction that implements the new action.  The first argument of the function is the editor it is used with, the second argument is the cell it operates upon.

Example

editor.addAction('test', function(editor, cell)
{
     mxUtils.alert("test "+cell);
});

execute

mxEditor.prototype.execute = function (actionname,
cell,
evt)

Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument.  All additional arguments are passed to the action as well.  This method contains a try-catch block and displays an error message if an action causes an exception.  The exception is re-thrown after the error message was displayed.

Example

editor.execute("showProperties", cell);

addTemplate

mxEditor.prototype.addTemplate = function (name,
template)

Adds the specified template under the given name in templates.

getTemplate

mxEditor.prototype.getTemplate = function (name)

Returns the template for the given name.

createGraph

mxEditor.prototype.createGraph = function ()

Creates the graph for the editor.  The graph is created with no container and is initialized from setGraphContainer.

createSwimlaneManager

mxEditor.prototype.createSwimlaneManager = function (graph)

Sets the graph’s container using mxGraph.init.

createLayoutManager

mxEditor.prototype.createLayoutManager = function (graph)

Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.

setGraphContainer

mxEditor.prototype.setGraphContainer = function (container)

Sets the graph’s container using mxGraph.init.

installDblClickHandler

mxEditor.prototype.installDblClickHandler = function (graph)

Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.

installUndoHandler

mxEditor.prototype.installUndoHandler = function (graph)

Adds the undoManager to the graph model and the view.

installDrillHandler

mxEditor.prototype.installDrillHandler = function (graph)

Installs listeners for dispatching the <root> event.

installChangeHandler

mxEditor.prototype.installChangeHandler = function (graph)

Installs the listeners required to automatically validate the graph.  On each change of the root, this implementation fires a <root> event.

installInsertHandler

mxEditor.prototype.installInsertHandler = function (graph)

Installs the handler for invoking insertFunction if one is defined.

createDiagramLayout

mxEditor.prototype.createDiagramLayout = function ()

Creates the layout instance used to layout the swimlanes in the diagram.

createSwimlaneLayout

mxEditor.prototype.createSwimlaneLayout = function ()

Creates the layout instance used to layout the children of each swimlane.

createToolbar

mxEditor.prototype.createToolbar = function ()

Creates the toolbar with no container.

setToolbarContainer

mxEditor.prototype.setToolbarContainer = function (container)

Initializes the toolbar for the given container.

setStatusContainer

mxEditor.prototype.setStatusContainer = function (container)

Creates the status using the specified container.

This implementation adds listeners in the editor to display the last saved time and the current filename in the status bar.

Parameters

containerDOM node that will contain the statusbar.

setStatus

mxEditor.prototype.setStatus = function (message)

Display the specified message in the status bar.

Parameters

messageString the specified the message to be displayed.

setTitleContainer

mxEditor.prototype.setTitleContainer = function (container)

Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.

Parameters

containerDOM node that will contain the title.

treeLayout

mxEditor.prototype.treeLayout = function (cell,
horizontal)

Executes a vertical or horizontal compact tree layout using the specified cell as an argument.  The cell may either be a group or the root of a tree.

Parameters

cellmxCell to use in the compact tree layout.
horizontalOptional boolean to specify the tree’s orientation.  Default is true.

getTitle

mxEditor.prototype.getTitle = function ()

Returns the string value for the current root of the diagram.

getRootTitle

mxEditor.prototype.getRootTitle = function ()

Returns the string value of the root cell in mxGraph.model.

undo

mxEditor.prototype.undo = function ()

Undo the last change in graph.

redo

mxEditor.prototype.redo = function ()

Redo the last change in graph.

groupCells

mxEditor.prototype.groupCells = function ()

Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.

createGroup

mxEditor.prototype.createGroup = function ()

Creates and returns a clone of defaultGroup to be used as a new group cell in <group>.

open

mxEditor.prototype.open = function (filename)

Opens the specified file synchronously and parses it using readGraphModel.  It updates filename and fires an open-event after the file has been opened.  Exceptions should be handled as follows:

try
{
  editor.open(filename);
}
catch (e)
{
  mxUtils.error('Cannot open ' + filename +
    ': ' + e.message, 280, true);
}

Parameters

filenameURL of the file to be opened.

readGraphModel

mxEditor.prototype.readGraphModel = function (node)

Reads the specified XML node into the existing graph model and resets the command history and modified state.

save

mxEditor.prototype.save = function (url,
linefeed)

Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.  The actual posting is carried out by postDiagram.  If the URL is null then the resulting XML will be displayed using mxUtils.popup.  Exceptions should be handled as follows:

try
{
  editor.save();
}
catch (e)
{
  mxUtils.error('Cannot save : ' + e.message, 280, true);
}

postDiagram

mxEditor.prototype.postDiagram = function (url,
data)

Hook for subclassers to override the posting of a diagram represented by the given node to the given URL.  This fires an asynchronous <post> event if the diagram has been posted.

Example

To replace the diagram with the diagram in the response, use the following code.

editor.addListener(mxEvent.POST, function(sender, evt)
{
  // Process response (replace diagram)
  var req = evt.getProperty('request');
  var root = req.getDocumentElement();
  editor.graph.readGraphModel(root)
});

writeGraphModel

mxEditor.prototype.writeGraphModel = function (linefeed)

Hook to create the string representation of the diagram.  The default implementation uses an mxCodec to encode the graph model as follows:

var enc = new mxCodec();
var node = enc.encode(this.graph.getModel());
return mxUtils.getXml(node, this.linefeed);

Parameters

linefeedOptional character to be used as the linefeed.  Default is <linefeed>.

getUrlPost

mxEditor.prototype.getUrlPost = function ()

Returns the URL to post the diagram to.  This is used in save.  The default implementation returns urlPost, adding <code>?draft=true</code>.

getUrlImage

mxEditor.prototype.getUrlImage = function ()

Returns the URL to create the image with.  This is typically the URL of a backend which accepts an XML representation of a graph view to create an image.  The function is used in the image action to create an image.  This implementation returns urlImage.

swapStyles

mxEditor.prototype.swapStyles = function (first,
second)

Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.

showProperties

mxEditor.prototype.showProperties = function (cell)

Creates and shows the properties dialog for the given cell.  The content area of the dialog is created using createProperties.

isPropertiesVisible

mxEditor.prototype.isPropertiesVisible = function ()

Returns true if the properties dialog is currently visible.

createProperties

mxEditor.prototype.createProperties = function (cell)

Creates and returns the DOM node that represents the contents of the properties dialog for the given cell.  This implementation works for user objects that are XML nodes and display all the node attributes in a form.

hideProperties

mxEditor.prototype.hideProperties = function ()

Hides the properties dialog.

showTasks

mxEditor.prototype.showTasks = function ()

Shows the tasks window.  The tasks window is created using createTasks.  The default width of the window is 200 pixels, the y-coordinate of the location can be specifies in tasksTop and the x-coordinate is right aligned with a 20 pixel offset from the right border.  To change the location of the tasks window, the following code can be used:

var oldShowTasks = mxEditor.prototype.showTasks;
mxEditor.prototype.showTasks = function()
{
  oldShowTasks.apply(this, arguments); // "supercall"

  if (this.tasks != null)
  {
    this.tasks.setLocation(10, 10);
  }
};

refreshTasks

mxEditor.prototype.refreshTasks = function (div)

Updates the contents of the tasks window using createTasks.

createTasks

mxEditor.prototype.createTasks = function (div)

Updates the contents of the given DOM node to display the tasks associated with the current editor state.  This is invoked whenever there is a possible change of state in the editor.  Default implementation is empty.

showHelp

mxEditor.prototype.showHelp = function (tasks)

Shows the help window.  If the help window does not exist then it is created using an iframe pointing to the resource for the <code>urlHelp</code> key or urlHelp if the resource is undefined.

showOutline

mxEditor.prototype.showOutline = function ()

Shows the outline window.  If the window does not exist, then it is created using an mxOutline.

setMode

mxEditor.prototype.setMode = function(modename)

Puts the graph into the specified mode.  The following modenames are supported:

selectSelects using the left mouse button, new connections are disabled.
connectSelects using the left mouse button or creates new connections if mouse over cell hotspot.  See mxConnectionHandler.
panPans using the left mouse button, new connections are disabled.

createPopupMenu

mxEditor.prototype.createPopupMenu = function (menu,
cell,
evt)

Uses popupHandler to create the menu in the graph’s panning handler.  The redirection is setup in setToolbarContainer.

createEdge

mxEditor.prototype.createEdge = function (source,
target)

Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph.  The style of the edge will be overridden with the value returned by getEdgeStyle.

getEdgeStyle

mxEditor.prototype.getEdgeStyle = function ()

Returns a string identifying the style of new edges.  The function is used in createEdge when new edges are created in the graph.

consumeCycleAttribute

mxEditor.prototype.consumeCycleAttribute = function (cell)

Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.

cycleAttribute

mxEditor.prototype.cycleAttribute = function (cell)

Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.

addVertex

mxEditor.prototype.addVertex = function (parent,
vertex,
x,
y)

Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.

destroy

mxEditor.prototype.destroy = function ()

Removes the editor and all its associated resources.  This does not normally need to be called, it is called automatically when the window unloads.

mxCodecRegistry

Singleton class that acts as a global registry for codecs.

Adding an mxCodec

1.  Define a default codec with a new instance of the object to be handled.

var codec = new mxObjectCodec(new mxGraphModel());

2.  Define the functions required for encoding and decoding objects.

codec.encode = function(enc, obj) { ... }
codec.decode = function(dec, node, into) { ... }

3.  Register the codec in the mxCodecRegistry.

mxCodecRegistry.register(codec);

mxObjectCodec.decode may be used to either create a new instance of an object or to configure an existing instance, in which case the into argument points to the existing object.  In this case, we say the codec “configures” the object.

Summary
Variables
codecsMaps from constructor names to codecs.
aliasesMaps from classnames to codecnames.
Functions
registerRegisters a new codec and associates the name of the template constructor in the codec with the codec object.
addAliasAdds an alias for mapping a classname to a codecname.
getCodecReturns a codec that handles objects that are constructed using the given constructor.

Variables

codecs

Maps from constructor names to codecs.

aliases

Maps from classnames to codecnames.

Functions

register

register: function(codec)

Registers a new codec and associates the name of the template constructor in the codec with the codec object.

Parameters

codecmxObjectCodec to be registered.

addAlias

addAlias: function(classname,
codecname)

Adds an alias for mapping a classname to a codecname.

getCodec

getCodec: function(ctor)

Returns a codec that handles objects that are constructed using the given constructor.

Parameters

ctorJavaScript constructor function.

mxCodec

XML codec for JavaScript object graphs.  See mxObjectCodec for a description of the general encoding/decoding scheme.  This class uses the codecs registered in mxCodecRegistry for encoding/decoding each object.

References

In order to resolve references, especially forward references, the mxCodec constructor must be given the document that contains the referenced elements.

Examples

The following code is used to encode a graph model.

var encoder = new mxCodec();
var result = encoder.encode(graph.getModel());
var xml = mxUtils.getXml(result);

Example

Using the code below, an XML document is decoded into an existing model.  The document may be obtained using one of the functions in mxUtils for loading an XML file, eg.  mxUtils.get, or using mxUtils.parseXml for parsing an XML string.

var doc = mxUtils.parseXml(xmlString);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());

Example

This example demonstrates parsing a list of isolated cells into an existing graph model.  Note that the cells do not have a parent reference so they can be added anywhere in the cell hierarchy after parsing.

var xml = '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
var elt = doc.documentElement.firstChild;
var cells = [];

while (elt != null)
{
  cells.push(codec.decode(elt));
  elt = elt.nextSibling;
}

graph.addCells(cells);

Example

Using the following code, the selection cells of a graph are encoded and the output is displayed in a dialog box.

var enc = new mxCodec();
var cells = graph.getSelectionCells();
mxUtils.alert(mxUtils.getPrettyXml(enc.encode(cells)));

Newlines in the XML can be converted to <br>, in which case a ‘<br>’ argument must be passed to mxUtils.getXml as the second argument.

Debugging

For debugging I/O you can use the following code to get the sequence of encoded objects:

var oldEncode = mxCodec.prototype.encode;
mxCodec.prototype.encode = function(obj)
{
  mxLog.show();
  mxLog.debug('mxCodec.encode: obj='+mxUtils.getFunctionName(obj.constructor));

  return oldEncode.apply(this, arguments);
};

Note that the I/O system adds object codecs for new object automatically.  For decoding those objects, the constructor should be written as follows:

var MyObj = function(name)
{
  // ...
};
Summary
Functions
mxCodecConstructs an XML encoder/decoder for the specified owner document.
Variables
documentThe owner document of the codec.
objectsMaps from IDs to objects.
elementsLookup table for resolving IDs to elements.
encodeDefaultsSpecifies if default values should be encoded.
Functions
putObjectAssoiates the given object with the given ID and returns the given object.
getObjectReturns the decoded object for the element with the specified ID in document.
lookupHook for subclassers to implement a custom lookup mechanism for cell IDs.
getElementByIdReturns the element with the given ID from document.
updateElementsReturns the element with the given ID from document.
addElementAdds the given element to elements if it has an ID.
getIdReturns the ID of the specified object.
referenceHook for subclassers to implement a custom method for retrieving IDs from objects.
encodeEncodes the specified object and returns the resulting XML node.
decodeDecodes the given XML node.
encodeCellEncoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg.
isCellCodecReturns true if the given codec is a cell codec.
decodeCellDecodes cells that have been encoded using inversion, ie.
insertIntoGraphInserts the given cell into its parent and terminal cells.
setAttributeSets the attribute on the specified node to value.

Functions

mxCodec

function mxCodec(document)

Constructs an XML encoder/decoder for the specified owner document.

Parameters

documentOptional XML document that contains the data.  If no document is specified then a new document is created using mxUtils.createXmlDocument.

Variables

document

mxCodec.prototype.document

The owner document of the codec.

objects

mxCodec.prototype.objects

Maps from IDs to objects.

elements

mxCodec.prototype.elements

Lookup table for resolving IDs to elements.

encodeDefaults

mxCodec.prototype.encodeDefaults

Specifies if default values should be encoded.  Default is false.

Functions

putObject

mxCodec.prototype.putObject = function(id,
obj)

Assoiates the given object with the given ID and returns the given object.

Parameters

idID for the object to be associated with.
objObject to be associated with the ID.

getObject

mxCodec.prototype.getObject = function(id)

Returns the decoded object for the element with the specified ID in document.  If the object is not known then lookup is used to find an object.  If no object is found, then the element with the respective ID from the document is parsed using decode.

lookup

mxCodec.prototype.lookup = function(id)

Hook for subclassers to implement a custom lookup mechanism for cell IDs.  This implementation always returns null.

Example

var codec = new mxCodec();
codec.lookup = function(id)
{
  return model.getCell(id);
};

Parameters

idID of the object to be returned.

getElementById

mxCodec.prototype.getElementById = function(id)

Returns the element with the given ID from document.

Parameters

idString that contains the ID.

updateElements

mxCodec.prototype.updateElements = function()

Returns the element with the given ID from document.

Parameters

idString that contains the ID.

addElement

mxCodec.prototype.addElement = function(node)

Adds the given element to elements if it has an ID.

getId

mxCodec.prototype.getId = function(obj)

Returns the ID of the specified object.  This implementation calls reference first and if that returns null handles the object as an mxCell by returning their IDs using mxCell.getId.  If no ID exists for the given cell, then an on-the-fly ID is generated using mxCellPath.create.

Parameters

objObject to return the ID for.

reference

mxCodec.prototype.reference = function(obj)

Hook for subclassers to implement a custom method for retrieving IDs from objects.  This implementation always returns null.

Example

var codec = new mxCodec();
codec.reference = function(obj)
{
  return obj.getCustomId();
};

Parameters

objObject whose ID should be returned.

encode

mxCodec.prototype.encode = function(obj)

Encodes the specified object and returns the resulting XML node.

Parameters

objObject to be encoded.

decode

mxCodec.prototype.decode = function(node,
into)

Decodes the given XML node.  The optional “into” argument specifies an existing object to be used.  If no object is given, then a new instance is created using the constructor from the codec.

The function returns the passed in object or the new instance if no object was given.

Parameters

nodeXML node to be decoded.
intoOptional object to be decodec into.

encodeCell

mxCodec.prototype.encodeCell = function(cell,
node,
includeChildren)

Encoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg.  mxModelCodec, mxChildChangeCodec and mxRootChangeCodec).  This implementation writes the given cell and its children as a (flat) sequence into the given node.  The children are not encoded if the optional includeChildren is false.  The function is in charge of adding the result into the given node and has no return value.

Parameters

cellmxCell to be encoded.
nodeParent XML node to add the encoded cell into.
includeChildrenOptional boolean indicating if the function should include all descendents.  Default is true.

isCellCodec

mxCodec.prototype.isCellCodec = function(codec)

Returns true if the given codec is a cell codec.  This uses mxCellCodec.isCellCodec to check if the codec is of the given type.

decodeCell

mxCodec.prototype.decodeCell = function(node,
restoreStructures)

Decodes cells that have been encoded using inversion, ie. where the user object is the enclosing node in the XML, and restores the group and graph structure in the cells.  Returns a new mxCell instance that represents the given node.

Parameters

nodeXML node that contains the cell data.
restoreStructuresOptional boolean indicating whether the graph structure should be restored by calling insert and insertEdge on the parent and terminals, respectively.  Default is true.

insertIntoGraph

mxCodec.prototype.insertIntoGraph = function(cell)

Inserts the given cell into its parent and terminal cells.

setAttribute

mxCodec.prototype.setAttribute = function(node,
attribute,
value)

Sets the attribute on the specified node to value.  This is a helper method that makes sure the attribute and value arguments are not null.

Parameters

nodeXML node to set the attribute for.
attributesAttributename to be set.
valueNew value of the attribute.

mxObjectCodec

Generic codec for JavaScript objects that implements a mapping between JavaScript objects and XML nodes that maps each field or element to an attribute or child node, and vice versa.

Atomic Values

Consider the following example.

var obj = new Object();
obj.foo = "Foo";
obj.bar = "Bar";

This object is encoded into an XML node using the following.

var enc = new mxCodec();
var node = enc.encode(obj);

The output of the encoding may be viewed using mxLog as follows.

mxLog.show();
mxLog.debug(mxUtils.getPrettyXml(node));

Finally, the result of the encoding looks as follows.

<Object foo="Foo" bar="Bar"/>

In the above output, the foo and bar fields have been mapped to attributes with the same names, and the name of the constructor was used for the nodename.

Booleans

Since booleans are numbers in JavaScript, all boolean values are encoded into 1 for true and 0 for false.  The decoder also accepts the string true and false for boolean values.

Objects

The above scheme is applied to all atomic fields, that is, to all non-object fields of an object.  For object fields, a child node is created with a special attribute that contains the fieldname.  This special attribute is called “as” and hence, as is a reserved word that should not be used for a fieldname.

Consider the following example where foo is an object and bar is an atomic property of foo.

var obj = {foo: {bar: "Bar"}};

This will be mapped to the following XML structure by mxObjectCodec.

<Object>
  <Object bar="Bar" as="foo"/>
</Object>

In the above output, the inner Object node contains the as-attribute that specifies the fieldname in the enclosing object.  That is, the field foo was mapped to a child node with an as-attribute that has the value foo.

Arrays

Arrays are special objects that are either associative, in which case each key, value pair is treated like a field where the key is the fieldname, or they are a sequence of atomic values and objects, which is mapped to a sequence of child nodes.  For object elements, the above scheme is applied without the use of the special as-attribute for creating each child.  For atomic elements, a special add-node is created with the value stored in the value-attribute.

For example, the following array contains one atomic value and one object with a field called bar.  Furthermore it contains two associative entries called bar with an atomic value, and foo with an object value.

var obj = ["Bar", {bar: "Bar"}];
obj["bar"] = "Bar";
obj["foo"] = {bar: "Bar"};

This array is represented by the following XML nodes.

<Array bar="Bar">
  <add value="Bar"/>
  <Object bar="Bar"/>
  <Object bar="Bar" as="foo"/>
</Array>

The Array node name is the name of the constructor.  The additional as-attribute in the last child contains the key of the associative entry, whereas the second last child is part of the array sequence and does not have an as-attribute.

References

Objects may be represented as child nodes or attributes with ID values, which are used to lookup the object in a table within mxCodec.  The isReference function is in charge of deciding if a specific field should be encoded as a reference or not.  Its default implementation returns true if the fieldname is in idrefs, an array of strings that is used to configure the mxObjectCodec.

Using this approach, the mapping does not guarantee that the referenced object itself exists in the document.  The fields that are encoded as references must be carefully chosen to make sure all referenced objects exist in the document, or may be resolved by some other means if necessary.

For example, in the case of the graph model all cells are stored in a tree whose root is referenced by the model’s root field.  A tree is a structure that is well suited for an XML representation, however, the additional edges in the graph model have a reference to a source and target cell, which are also contained in the tree.  To handle this case, the source and target cell of an edge are treated as references, whereas the children are treated as objects.  Since all cells are contained in the tree and no edge references a source or target outside the tree, this setup makes sure all referenced objects are contained in the document.

In the case of a tree structure we must further avoid infinite recursion by ignoring the parent reference of each child.  This is done by returning true in isExcluded, whose default implementation uses the array of excluded fieldnames passed to the mxObjectCodec constructor.

References are only used for cells in mxGraph.  For defining other referencable object types, the codec must be able to work out the ID of an object.  This is done by implementing mxCodec.reference.  For decoding a reference, the XML node with the respective id-attribute is fetched from the document, decoded, and stored in a lookup table for later reference.  For looking up external objects, mxCodec.lookup may be implemented.

Expressions

For decoding JavaScript expressions, the add-node may be used with a text content that contains the JavaScript expression.  For example, the following creates a field called foo in the enclosing object and assigns it the value of mxConstants.ALIGN_LEFT.

<Object>
  <add as="foo">mxConstants.ALIGN_LEFT</add>
</Object>

The resulting object has a field called foo with the value “left”.  Its XML representation looks as follows.

<Object foo="left"/>

This means the expression is evaluated at decoding time and the result of the evaluation is stored in the respective field.  Valid expressions are all JavaScript expressions, including function definitions, which are mapped to functions on the resulting object.

Expressions are only evaluated if allowEval is true.

Summary
Functions
mxObjectCodecConstructs a new codec for the specified template object.
Variables
allowEvalStatic global switch that specifies if expressions in arrays are allowed.
templateHolds the template object associated with this codec.
excludeArray containing the variable names that should be ignored by the codec.
idrefsArray containing the variable names that should be turned into or converted from references.
mappingMaps from from fieldnames to XML attribute names.
reverseMaps from from XML attribute names to fieldnames.
Functions
getNameReturns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded.
cloneTemplateReturns a new instance of the template for this codec.
getFieldNameReturns the fieldname for the given attributename.
getAttributeNameReturns the attributename for the given fieldname.
isExcludedReturns true if the given attribute is to be ignored by the codec.
isReferenceReturns true if the given fieldname is to be treated as a textual reference (ID).
encodeEncodes the specified object and returns a node representing then given object.
encodeObjectEncodes the value of each member in then given obj into the given node using encodeValue.
encodeValueConverts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.
writeAttributeWrites the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.
writePrimitiveAttributeWrites the given value as an attribute of the given node.
writeComplexAttributeWrites the given value as a child node of the given node.
convertAttributeToXmlConverts true to “1” and false to “0” is isBooleanAttribute returns true.
isBooleanAttributeReturns true if the given object attribute is a boolean value.
convertAttributeFromXmlConverts booleans and numeric values to the respective types.
isNumericAttributeReturns true if the given XML attribute is or should be a numeric value.
beforeEncodeHook for subclassers to pre-process the object before encoding.
afterEncodeHook for subclassers to post-process the node for the given object after encoding and return the post-processed node.
decodeParses the given node into the object or returns a new object representing the given node.
decodeNodeCalls decodeAttributes and decodeChildren for the given node.
decodeAttributesDecodes all attributes of the given node using decodeAttribute.
isIgnoredAttributeReturns true if the given attribute should be ignored.
decodeAttributeReads the given attribute into the specified object.
decodeChildrenDecodes all children of the given node using decodeChild.
decodeChildReads the specified child into the given object.
getFieldTemplateReturns the template instance for the given field.
addObjectValueSets the decoded child node as a value of the given object.
processIncludeReturns true if the given node is an include directive and executes the include by decoding the XML document.
beforeDecodeHook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode.
afterDecodeHook for subclassers to post-process the object after decoding.

Functions

mxObjectCodec

function mxObjectCodec(template,
exclude,
idrefs,
mapping)

Constructs a new codec for the specified template object.  The variables in the optional exclude array are ignored by the codec.  Variables in the optional idrefs array are turned into references in the XML.  The optional mapping may be used to map from variable names to XML attributes.  The argument is created as follows:

var mapping = new Object();
mapping['variableName'] = 'attribute-name';

Parameters

templatePrototypical instance of the object to be encoded/decoded.
excludeOptional array of fieldnames to be ignored.
idrefsOptional array of fieldnames to be converted to/from references.
mappingOptional mapping from field- to attributenames.

Variables

allowEval

mxObjectCodec.allowEval

Static global switch that specifies if expressions in arrays are allowed.  Default is false.  NOTE: Enabling this carries a possible security risk.

template

mxObjectCodec.prototype.template

Holds the template object associated with this codec.

exclude

mxObjectCodec.prototype.exclude

Array containing the variable names that should be ignored by the codec.

idrefs

mxObjectCodec.prototype.idrefs

Array containing the variable names that should be turned into or converted from references.  See mxCodec.getId and mxCodec.getObject.

mapping

mxObjectCodec.prototype.mapping

Maps from from fieldnames to XML attribute names.

reverse

mxObjectCodec.prototype.reverse

Maps from from XML attribute names to fieldnames.

Functions

getName

mxObjectCodec.prototype.getName = function()

Returns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded.  For classes to work with this the codec registry automatically adds an alias for the classname if that is different than what this returns.  The default implementation returns the classname of the template class.

cloneTemplate

mxObjectCodec.prototype.cloneTemplate = function()

Returns a new instance of the template for this codec.

getFieldName

mxObjectCodec.prototype.getFieldName = function(attributename)

Returns the fieldname for the given attributename.  Looks up the value in the reverse mapping or returns the input if there is no reverse mapping for the given name.

getAttributeName

mxObjectCodec.prototype.getAttributeName = function(fieldname)

Returns the attributename for the given fieldname.  Looks up the value in the mapping or returns the input if there is no mapping for the given name.

isExcluded

mxObjectCodec.prototype.isExcluded = function(obj,
attr,
value,
write)

Returns true if the given attribute is to be ignored by the codec.  This implementation returns true if the given fieldname is in exclude or if the fieldname equals mxObjectIdentity.FIELD_NAME.

Parameters

objObject instance that contains the field.
attrFieldname of the field.
valueValue of the field.
writeBoolean indicating if the field is being encoded or decoded.  Write is true if the field is being encoded, else it is being decoded.

isReference

mxObjectCodec.prototype.isReference = function(obj,
attr,
value,
write)

Returns true if the given fieldname is to be treated as a textual reference (ID).  This implementation returns true if the given fieldname is in idrefs.

Parameters

objObject instance that contains the field.
attrFieldname of the field.
valueValue of the field.
writeBoolean indicating if the field is being encoded or decoded.  Write is true if the field is being encoded, else it is being decoded.

encode

mxObjectCodec.prototype.encode = function(enc,
obj)

Encodes the specified object and returns a node representing then given object.  Calls beforeEncode after creating the node and afterEncode with the resulting node after processing.

Enc is a reference to the calling encoder.  It is used to encode complex objects and create references.

This implementation encodes all variables of an object according to the following rules:

  • If the variable name is in exclude then it is ignored.
  • If the variable name is in idrefs then mxCodec.getId is used to replace the object with its ID.
  • The variable name is mapped using mapping.
  • If obj is an array and the variable name is numeric (ie. an index) then it is not encoded.
  • If the value is an object, then the codec is used to create a child node with the variable name encoded into the “as” attribute.
  • Else, if <encodeDefaults> is true or the value differs from the template value, then ...
  • ... if obj is not an array, then the value is mapped to an attribute.
  • ... else if obj is an array, the value is mapped to an add child with a value attribute or a text child node, if the value is a function.

If no ID exists for a variable in idrefs or if an object cannot be encoded, a warning is issued using mxLog.warn.

Returns the resulting XML node that represents the given object.

Parameters

encmxCodec that controls the encoding process.
objObject to be encoded.

encodeObject

mxObjectCodec.prototype.encodeObject = function(enc,
obj,
node)

Encodes the value of each member in then given obj into the given node using encodeValue.

Parameters

encmxCodec that controls the encoding process.
objObject to be encoded.
nodeXML node that contains the encoded object.

encodeValue

mxObjectCodec.prototype.encodeValue = function(enc,
obj,
name,
value,
node)

Converts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.

Parameters

encmxCodec that controls the encoding process.
objObject whose property is going to be encoded.
nameXML node that contains the encoded object.
valueValue of the property to be encoded.
nodeXML node that contains the encoded object.

writeAttribute

mxObjectCodec.prototype.writeAttribute = function(enc,
obj,
name,
value,
node)

Writes the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.

writePrimitiveAttribute

mxObjectCodec.prototype.writePrimitiveAttribute = function(enc,
obj,
name,
value,
node)

Writes the given value as an attribute of the given node.

writeComplexAttribute

mxObjectCodec.prototype.writeComplexAttribute = function(enc,
obj,
name,
value,
node)

Writes the given value as a child node of the given node.

convertAttributeToXml

mxObjectCodec.prototype.convertAttributeToXml = function(enc,
obj,
name,
value)

Converts true to “1” and false to “0” is isBooleanAttribute returns true.  All other values are not converted.

Parameters

encmxCodec that controls the encoding process.
objObjec to convert the attribute for.
nameName of the attribute to be converted.
valueValue to be converted.

isBooleanAttribute

mxObjectCodec.prototype.isBooleanAttribute = function(enc,
obj,
name,
value)

Returns true if the given object attribute is a boolean value.

Parameters

encmxCodec that controls the encoding process.
objObjec to convert the attribute for.
nameName of the attribute to be converted.
valueValue of the attribute to be converted.

convertAttributeFromXml

mxObjectCodec.prototype.convertAttributeFromXml = function(dec,
attr,
obj)

Converts booleans and numeric values to the respective types.  Values are numeric if isNumericAttribute returns true.

Parameters

decmxCodec that controls the decoding process.
attrXML attribute to be converted.
objObjec to convert the attribute for.

isNumericAttribute

mxObjectCodec.prototype.isNumericAttribute = function(dec,
attr,
obj)

Returns true if the given XML attribute is or should be a numeric value.

Parameters

decmxCodec that controls the decoding process.
attrXML attribute to be converted.
objObjec to convert the attribute for.

beforeEncode

mxObjectCodec.prototype.beforeEncode = function(enc,
obj,
node)

Hook for subclassers to pre-process the object before encoding.  This returns the input object.  The return value of this function is used in encode to perform the default encoding into the given node.

Parameters

encmxCodec that controls the encoding process.
objObject to be encoded.
nodeXML node to encode the object into.

afterEncode

mxObjectCodec.prototype.afterEncode = function(enc,
obj,
node)

Hook for subclassers to post-process the node for the given object after encoding and return the post-processed node.  This implementation returns the input node.  The return value of this method is returned to the encoder from encode.

Parameters

encmxCodec that controls the encoding process.
objObject to be encoded.
nodeXML node that represents the default encoding.

decode

mxObjectCodec.prototype.decode = function(dec,
node,
into)

Parses the given node into the object or returns a new object representing the given node.

Dec is a reference to the calling decoder.  It is used to decode complex objects and resolve references.

If a node has an id attribute then the object cache is checked for the object.  If the object is not yet in the cache then it is constructed using the constructor of template and cached in mxCodec.objects.

This implementation decodes all attributes and childs of a node according to the following rules:

  • If the variable name is in exclude or if the attribute name is “id” or “as” then it is ignored.
  • If the variable name is in idrefs then mxCodec.getObject is used to replace the reference with an object.
  • The variable name is mapped using a reverse mapping.
  • If the value has a child node, then the codec is used to create a child object with the variable name taken from the “as” attribute.
  • If the object is an array and the variable name is empty then the value or child object is appended to the array.
  • If an add child has no value or the object is not an array then the child text content is evaluated using mxUtils.eval.

For add nodes where the object is not an array and the variable name is defined, the default mechanism is used, allowing to override/add methods as follows:

<Object>
  <add as="hello"><![CDATA[
    function(arg1) {
      mxUtils.alert('Hello '+arg1);
    }
  ]]></add>
</Object>

If no object exists for an ID in idrefs a warning is issued using mxLog.warn.

Returns the resulting object that represents the given XML node or the object given to the method as the into parameter.

Parameters

decmxCodec that controls the decoding process.
nodeXML node to be decoded.
intoOptional objec to encode the node into.

decodeNode

mxObjectCodec.prototype.decodeNode = function(dec,
node,
obj)

Calls decodeAttributes and decodeChildren for the given node.

Parameters

decmxCodec that controls the decoding process.
nodeXML node to be decoded.
objObjec to encode the node into.

decodeAttributes

mxObjectCodec.prototype.decodeAttributes = function(dec,
node,
obj)

Decodes all attributes of the given node using decodeAttribute.

Parameters

decmxCodec that controls the decoding process.
nodeXML node to be decoded.
objObjec to encode the node into.

isIgnoredAttribute

mxObjectCodec.prototype.isIgnoredAttribute = function(dec,
attr,
obj)

Returns true if the given attribute should be ignored.  This implementation returns true if the attribute name is “as” or “id”.

Parameters

decmxCodec that controls the decoding process.
attrXML attribute to be decoded.
objObjec to encode the attribute into.

decodeAttribute

mxObjectCodec.prototype.decodeAttribute = function(dec,
attr,
obj)

Reads the given attribute into the specified object.

Parameters

decmxCodec that controls the decoding process.
attrXML attribute to be decoded.
objObjec to encode the attribute into.

decodeChildren

mxObjectCodec.prototype.decodeChildren = function(dec,
node,
obj)

Decodes all children of the given node using decodeChild.

Parameters

decmxCodec that controls the decoding process.
nodeXML node to be decoded.
objObjec to encode the node into.

decodeChild

mxObjectCodec.prototype.decodeChild = function(dec,
child,
obj)

Reads the specified child into the given object.

Parameters

decmxCodec that controls the decoding process.
childXML child element to be decoded.
objObjec to encode the node into.

getFieldTemplate

mxObjectCodec.prototype.getFieldTemplate = function(obj,
fieldname,
child)

Returns the template instance for the given field.  This returns the value of the field, null if the value is an array or an empty collection if the value is a collection.  The value is then used to populate the field for a new instance.  For strongly typed languages it may be required to override this to return the correct collection instance based on the encoded child.

addObjectValue

mxObjectCodec.prototype.addObjectValue = function(obj,
fieldname,
value,
template)

Sets the decoded child node as a value of the given object.  If the object is a map, then the value is added with the given fieldname as a key.  If the fieldname is not empty, then setFieldValue is called or else, if the object is a collection, the value is added to the collection.  For strongly typed languages it may be required to override this with the correct code to add an entry to an object.

processInclude

mxObjectCodec.prototype.processInclude = function(dec,
node,
into)

Returns true if the given node is an include directive and executes the include by decoding the XML document.  Returns false if the given node is not an include directive.

Parameters

decmxCodec that controls the encoding/decoding process.
nodeXML node to be checked.
intoOptional object to pass-thru to the codec.

beforeDecode

mxObjectCodec.prototype.beforeDecode = function(dec,
node,
obj)

Hook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode.  The object is created based on the template in the calling method and is never null.  This implementation returns the input node.  The return value of this function is used in decode to perform the default decoding into the given object.

Parameters

decmxCodec that controls the decoding process.
nodeXML node to be decoded.
objObject to encode the node into.

afterDecode

mxObjectCodec.prototype.afterDecode = function(dec,
node,
obj)

Hook for subclassers to post-process the object after decoding.  This implementation returns the given object without any changes.  The return value of this method is returned to the decoder from decode.

Parameters

encmxCodec that controls the encoding process.
nodeXML node to be decoded.
objObject that represents the default decoding.

mxCellCodec

Codec for mxCells.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • children
  • edges
  • overlays
  • mxTransient

Reference Fields

  • parent
  • source
  • target

Transient fields can be added using the following code

mxCodecRegistry.getCodec(mxCell).exclude.push(‘name_of_field’);

To subclass mxCell, replace the template and add an alias as follows.

function CustomCell(value, geometry, style)
{
  mxCell.apply(this, arguments);
}

mxUtils.extend(CustomCell, mxCell);

mxCodecRegistry.getCodec(mxCell).template = new CustomCell();
mxCodecRegistry.addAlias('CustomCell', 'mxCell');
Summary
Functions
isCellCodecReturns true since this is a cell codec.
isExcludedExcludes user objects that are XML nodes.
afterEncodeEncodes an mxCell and wraps the XML up inside the XML of the user object (inversion).
beforeDecodeDecodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).

Functions

isCellCodec

codec.isCellCodec = function()

Returns true since this is a cell codec.

isExcluded

codec.isExcluded = function(obj,
attr,
value,
isWrite)

Excludes user objects that are XML nodes.

afterEncode

codec.afterEncode = function(enc,
obj,
node)

Encodes an mxCell and wraps the XML up inside the XML of the user object (inversion).

beforeDecode

codec.beforeDecode = function(dec,
node,
obj)

Decodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).

mxModelCodec

Codec for mxGraphModels.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Summary
Functions
encodeObjectEncodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec.
decodeChildOverrides decode child to handle special child nodes.
decodeRootReads the cells into the graph model.

Functions

encodeObject

codec.encodeObject = function(enc,
obj,
node)

Encodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec.  The sequence is wrapped-up in a node with the name root.

decodeChild

codec.decodeChild = function(dec,
child,
obj)

Overrides decode child to handle special child nodes.

decodeRoot

codec.decodeRoot = function(dec,
root,
model)

Reads the cells into the graph model.  All cells are children of the root element in the node.

mxRootChangeCodec

Codec for mxRootChanges.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • model
  • previous
  • root
Summary
Functions
onEncodeEncodes the child recursively.
beforeDecodeDecodes the optional children as cells using the respective decoder.
afterDecodeRestores the state by assigning the previous value.

Functions

onEncode

Encodes the child recursively.

beforeDecode

codec.beforeDecode = function(dec,
node,
obj)

Decodes the optional children as cells using the respective decoder.

afterDecode

codec.afterDecode = function(dec,
node,
obj)

Restores the state by assigning the previous value.

mxChildChangeCodec

Codec for mxChildChanges.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • model
  • previous
  • previousIndex
  • child

Reference Fields

  • parent
Summary
Functions
isReferenceReturns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.
isExcludedExcludes references to parent or previous if not in the model.
afterEncodeEncodes the child recusively and adds the result to the given node.
beforeDecodeDecodes the any child nodes as using the respective codec from the registry.
afterDecodeRestores object state in the child change.

Functions

isReference

codec.isReference = function(obj,
attr,
value,
isWrite)

Returns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.

isExcluded

codec.isExcluded = function(obj,
attr,
value,
write)

Excludes references to parent or previous if not in the model.

afterEncode

codec.afterEncode = function(enc,
obj,
node)

Encodes the child recusively and adds the result to the given node.

beforeDecode

codec.beforeDecode = function(dec,
node,
obj)

Decodes the any child nodes as using the respective codec from the registry.

afterDecode

codec.afterDecode = function(dec,
node,
obj)

Restores object state in the child change.

mxTerminalChangeCodec

Codec for mxTerminalChanges.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • model
  • previous

Reference Fields

  • cell
  • terminal
Summary
Functions
afterDecodeRestores the state by assigning the previous value.

Functions

afterDecode

codec.afterDecode = function(dec,
node,
obj)

Restores the state by assigning the previous value.

mxGenericChangeCodec

Codec for mxValueChanges, mxStyleChanges, mxGeometryChanges, mxCollapseChanges and mxVisibleChanges.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • model
  • previous

Reference Fields

  • cell
Summary
Functions
mxGenericChangeCodecFactory function that creates a mxObjectCodec for the specified change and fieldname.
afterDecodeRestores the state by assigning the previous value.

Functions

mxGenericChangeCodec

var mxGenericChangeCodec = function(obj,
variable)

Factory function that creates a mxObjectCodec for the specified change and fieldname.

Parameters

objAn instance of the change object.
variableThe fieldname for the change data.

afterDecode

codec.afterDecode = function(dec,
node,
obj)

Restores the state by assigning the previous value.

mxGraphCodec

Codec for mxGraphs.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • graphListeners
  • eventListeners
  • view
  • container
  • cellRenderer
  • editor
  • selection

mxGraphViewCodec

Custom encoder for mxGraphViews.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.  This codec only writes views into a XML format that can be used to create an image for the graph, that is, it contains absolute coordinates with computed perimeters, edge styles and cell styles.

Summary
Functions
encodeEncodes the given mxGraphView using encodeCell starting at the model’s root.
encodeCellRecursively encodes the specifed cell.

Functions

encode

codec.encode = function(enc,
view)

Encodes the given mxGraphView using encodeCell starting at the model’s root.  This returns the top-level graph node of the recursive encoding.

encodeCell

codec.encodeCell = function(enc,
view,
cell)

Recursively encodes the specifed cell.  Uses layer as the default nodename.  If the cell’s parent is null, then graph is used for the nodename.  If mxGraphModel.isEdge returns true for the cell, then edge is used for the nodename, else if mxGraphModel.isVertex returns true for the cell, then vertex is used for the nodename.

mxGraph.getLabel is used to create the label attribute for the cell.  For graph nodes and vertices the bounds are encoded into x, y, width and height.  For edges the points are encoded into a points attribute as a space-separated list of comma-separated coordinate pairs (eg. x0,y0 x1,y1 ... xn,yn).  All values from the cell style are added as attribute values to the node.

mxStylesheetCodec

Codec for mxStylesheets.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Summary
Functions
encodeEncodes a stylesheet.
getStringValueReturns the string for encoding the given value.
decodeReads a sequence of the following child nodes and attributes:
Variables
allowEvalStatic global switch that specifies if the use of eval is allowed for evaluating text content.

Functions

encode

codec.encode = function(enc,
obj)

Encodes a stylesheet.  See decode for a description of the format.

getStringValue

codec.getStringValue = function(key,
value)

Returns the string for encoding the given value.

decode

codec.decode = function(dec,
node,
into)

Reads a sequence of the following child nodes and attributes:

Child Nodes

addAdds a new style.

Attributes

asName of the style.
extendName of the style to inherit from.

Each node contains another sequence of add and remove nodes with the following attributes:

asName of the style (see mxConstants).
valueValue for the style.

Instead of the value-attribute, one can put Javascript expressions into the node as follows if mxStylesheetCodec.allowEval is true: <add as=”perimeter”>mxPerimeter.RectanglePerimeter</add>

A remove node will remove the entry with the name given in the as-attribute from the style.

Example

<mxStylesheet as="stylesheet">
  <add as="text">
    <add as="fontSize" value="12"/>
  </add>
  <add as="defaultVertex" extend="text">
    <add as="shape" value="rectangle"/>
  </add>
</mxStylesheet>

Variables

allowEval

mxStylesheetCodec.allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content.  Default is true.  Set this to false if stylesheets may contain user input.

mxDefaultKeyHandlerCodec

Custom codec for configuring mxDefaultKeyHandlers.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.  This codec only reads configuration data for existing key handlers, it does not encode or create key handlers.

Summary
Functions
encodeReturns null.
decodeReads a sequence of the following child nodes and attributes:

Functions

encode

codec.encode = function(enc,
obj)

Returns null.

decode

codec.decode = function(dec,
node,
into)

Reads a sequence of the following child nodes and attributes:

Child Nodes

addBinds a keystroke to an actionname.

Attributes

asKeycode.
actionActionname to execute in editor.
controlOptional boolean indicating if the control key must be pressed.

Example

<mxDefaultKeyHandler as="keyHandler">
  <add as="88" control="true" action="cut"/>
  <add as="67" control="true" action="copy"/>
  <add as="86" control="true" action="paste"/>
</mxDefaultKeyHandler>

The keycodes are for the x, c and v keys.

See also: mxDefaultKeyHandler.bindAction, http://www.js-examples.com/page/tutorials__key_codes.html

mxDefaultToolbarCodec

Custom codec for configuring mxDefaultToolbars.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.  This codec only reads configuration data for existing toolbars handlers, it does not encode or create toolbars.

Summary
Functions
encodeReturns null.
decodeReads a sequence of the following child nodes and attributes:
Variables
allowEvalStatic global switch that specifies if the use of eval is allowed for evaluating text content.

Functions

encode

codec.encode = function(enc,
obj)

Returns null.

decode

codec.decode = function(dec,
node,
into)

Reads a sequence of the following child nodes and attributes:

Child Nodes

addAdds a new item to the toolbar.  See below for attributes.
separatorAdds a vertical separator.  No attributes.
hrAdds a horizontal separator.  No attributes.
brAdds a linefeed.  No attributes.

Attributes

asResource key for the label.
actionName of the action to execute in enclosing editor.
modeModename (see below).
templateTemplate name for cell insertion.
styleOptional style to override the template style.
iconIcon (relative/absolute URL).
pressedIconOptional icon for pressed state (relative/absolute URL).
idOptional ID to be used for the created DOM element.
toggleOptional 0 or 1 to disable toggling of the element.  Default is 1 (true).

The action, mode and template attributes are mutually exclusive.  The style can only be used with the template attribute.  The add node may contain another sequence of add nodes with as and action attributes to create a combo box in the toolbar.  If the icon is specified then a list of the child node is expected to have its template attribute set and the action is ignored instead.

Nodes with a specified template may define a function to be used for inserting the cloned template into the graph.  Here is an example of such a node:

<add as="Swimlane" template="swimlane" icon="images/swimlane.gif"><![CDATA[
  function (editor, cell, evt, targetCell)
  {
    var pt = mxUtils.convertPoint(
      editor.graph.container, mxEvent.getClientX(evt),
        mxEvent.getClientY(evt));
    return editor.addVertex(targetCell, cell, pt.x, pt.y);
  }
]]></add>

In the above function, editor is the enclosing mxEditor instance, cell is the clone of the template, evt is the mouse event that represents the drop and targetCell is the cell under the mousepointer where the drop occurred.  The targetCell is retrieved using mxGraph.getCellAt.

Futhermore, nodes with the mode attribute may define a function to be executed upon selection of the respective toolbar icon.  In the example below, the default edge style is set when this specific connect-mode is activated:

<add as="connect" mode="connect"><![CDATA[
  function (editor)
  {
    if (editor.defaultEdge != null)
    {
      editor.defaultEdge.style = 'straightEdge';
    }
  }
]]></add>

Both functions require mxDefaultToolbarCodec.allowEval to be set to true.

Modes

selectLeft mouse button used for rubberband- & cell-selection.
connectAllows connecting vertices by inserting new edges.
panDisables selection and switches to panning on the left button.

Example

To add items to the toolbar

<mxDefaultToolbar as="toolbar">
  <add as="save" action="save" icon="images/save.gif"/>
  <br/><hr/>
  <add as="select" mode="select" icon="images/select.gif"/>
  <add as="connect" mode="connect" icon="images/connect.gif"/>
</mxDefaultToolbar>

Variables

allowEval

mxDefaultToolbarCodec.allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content.  Default is true.  Set this to false if stylesheets may contain user input

mxDefaultPopupMenuCodec

Custom codec for configuring mxDefaultPopupMenus.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.  This codec only reads configuration data for existing popup menus, it does not encode or create menus.  Note that this codec only passes the configuration node to the popup menu, which uses the config to dynamically create menus.  See mxDefaultPopupMenu.createMenu.

Summary
Functions
encodeReturns null.
decodeUses the given node as the config for mxDefaultPopupMenu.

Functions

encode

codec.encode = function(enc,
obj)

Returns null.

decode

codec.decode = function(dec,
node,
into)

Uses the given node as the config for mxDefaultPopupMenu.

mxEditorCodec

Codec for mxEditors.  This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

  • modified
  • lastSnapshot
  • ignoredChanges
  • undoManager
  • graphContainer
  • toolbarContainer
Summary
Functions
beforeDecodeDecodes the ui-part of the configuration node by reading a sequence of the following child nodes and attributes and passes the control to the default decoding mechanism:
decodeChildOverrides decode child to handle special child nodes.
decodeTemplatesDecodes the cells from the given node as templates.
decodeTemplatesDecodes the cells from the given node as templates.

Functions

beforeDecode

Decodes the ui-part of the configuration node by reading a sequence of the following child nodes and attributes and passes the control to the default decoding mechanism:

Child Nodes

stylesheetAdds a CSS stylesheet to the document.
resourceAdds the basename of a resource bundle.
addCreates or configures a known UI element.

These elements may appear in any order given that the graph UI element is added before the toolbar element (see Known Keys).

Attributes

asKey for the UI element (see below).
elementID for the element in the document.
styleCSS style to be used for the element or window.
xX coordinate for the new window.
yY coordinate for the new window.
widthWidth for the new window.
heightOptional height for the new window.
nameName of the stylesheet (absolute/relative URL).
basenameBasename of the resource bundle (see mxResources).

The x, y, width and height attributes are used to create a new mxWindow if the element attribute is not specified in an add node.  The name and basename are only used in the stylesheet and resource nodes, respectively.

Known Keys

graphMain graph element (see mxEditor.setGraphContainer).
titleTitle element (see mxEditor.setTitleContainer).
toolbarToolbar element (see mxEditor.setToolbarContainer).
statusStatus bar element (see mxEditor.setStatusContainer).

Example

<ui>
  <stylesheet name="css/process.css"/>
  <resource basename="resources/app"/>
  <add as="graph" element="graph"
    style="left:70px;right:20px;top:20px;bottom:40px"/>
  <add as="status" element="status"/>
  <add as="toolbar" x="10" y="20" width="54"/>
</ui>

decodeChild

codec.decodeChild = function(dec,
child,
obj)

Overrides decode child to handle special child nodes.

decodeTemplates

Decodes the cells from the given node as templates.

decodeTemplates

codec.decodeTemplates = function(dec,
node,
editor)

Decodes the cells from the given node as templates.

IS_IE: navigator.userAgent.indexOf('MSIE') >
True if the current browser is Internet Explorer 10 or below.
IS_IE6: navigator.userAgent.indexOf('MSIE 6') >
True if the current browser is Internet Explorer 6.x.
IS_QUIRKS: navigator.userAgent.indexOf('MSIE') >
True if the current browser is Internet Explorer and it is in quirks mode.
IS_EM: 'spellcheck' in document.createElement(
   'textarea'
) && document.documentMode
True if the browser is IE11 in enterprise mode (IE8 standards mode).
IS_NS: navigator.userAgent.indexOf('Mozilla/') >
True if the current browser is Netscape (including Firefox).
IS_OP: navigator.userAgent.indexOf('Opera/') >
True if the current browser is Opera.
IS_OT: navigator.userAgent.indexOf('Presto/') >
True if -o-transform is available as a CSS style, ie for Opera browsers based on a Presto engine with version 2.5 or later.
IS_SF: navigator.userAgent.indexOf('AppleWebKit/') >
True if the current browser is Safari.
IS_GC: navigator.userAgent.indexOf('Chrome/') >
True if the current browser is Google Chrome.
IS_CHROMEAPP: window.chrome !
True if the this is running inside a Chrome App.
IS_FF: navigator.userAgent.indexOf('Firefox/') >
True if the current browser is Firefox.
IS_VML: navigator.appName.toUpperCase()
True if the browser supports VML.
IS_SVG: navigator.appName.toUpperCase() !
True if the browser supports SVG.
NO_FO: !document.createElementNS || document.createElementNS(
   'http://www.w3.org/2000/svg',
   'foreignObject'
) !
True if foreignObject support is not available.
IS_POINTER: window.PointerEvent !
True if this device supports Microsoft pointer events (always false on Macs).
isBrowserSupported: function()
Returns true if the current browser is supported, that is, if mxClient.IS_VML or mxClient.IS_SVG is true.
link: function(rel,
href,
doc,
id)
Adds a link node to the head of the document.
loadResources: function(fn,
lan)
Helper method to load the default bundles if mxLoadResources is false.
include: function(src)
Dynamically adds a script node to the document header.
Extends mxEventSource to implement a graph component for the browser.
Extends mxEventSource to implement a application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg.
enter: function(string)
Writes the specified string to the console if TRACE is true and returns the current time in milliseconds.
leave: function(string,
t0)
Writes the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds.
debug: function()
Adds all arguments to the console if DEBUG is enabled.
warn: function()
Adds all arguments to the console if WARN is enabled.
init: function()
Initializes the DOM node for the console.
info: function()
Writes the current navigator information to the console.
addButton: function(lab,
funct)
Adds a button to the console using the given label and function.
isVisible: function()
Returns true if the console is visible.
show: function()
Shows the console.
setVisible: function(visible)
Shows or hides the console.
Specified if the output for enter and leave should be visible in the console.
Specifies if the output for debug should be visible in the console.
Specifies if the output for warn should be visible in the console.
write: function()
Adds the specified strings to the console.
writeln: function()
Adds the specified strings to the console, appending a linefeed at the end of each string.
get: function(obj)
Returns the ID for the given object or function or null if no object is specified.
clear: function(obj)
Deletes the ID from the given object or function.
mxDictionary.prototype.clear = function()
Clears the dictionary.
mxDictionary.prototype.get = function(key)
Returns the value for the given key.
mxDictionary.prototype.put = function(key,
value)
Stores the value under the given key and returns the previous value for that key.
mxDictionary.prototype.remove = function(key)
Removes the value for the given key and returns the value that has been removed.
mxDictionary.prototype.getKeys = function()
Returns all keys as an array.
mxDictionary.prototype.getValues = function()
Returns all values as an array.
mxDictionary.prototype.visit = function(visitor)
Visits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.
isLanguageSupported: function(lan)
Hook for subclassers to disable support for a given language.
getDefaultBundle: function(basename,
lan)
Hook for subclassers to return the URL for the special bundle.
getSpecialBundle: function(basename,
lan)
Hook for subclassers to return the URL for the special bundle.
add: function(basename,
lan,
callback)
Adds the default and current language properties file for the specified basename.
parse: function(text)
Parses the key, value pairs in the specified text and stores them as local resources.
get: function(key,
params,
defaultValue)
Returns the value for the specified resource key.
replacePlaceholders: function(value,
params)
Replaces the given placeholders with the given parameters.
loadResources: function(callback)
Loads all required resources asynchronously.
function mxPoint(x,
y)
Constructs a new point for the optional x and y coordinates.
mxPoint.prototype.x
Holds the x-coordinate of the point.
mxPoint.prototype.y
Holds the y-coordinate of the point.
mxPoint.prototype.equals = function(obj)
Returns true if the given object equals this point.
mxPoint.prototype.clone = function()
Returns a clone of this mxPoint.
Implements a 2-dimensional vector with double precision coordinates.
function mxRectangle(x,
y,
width,
height)
Constructs a new rectangle for the optional parameters.
mxRectangle.prototype.width
Holds the width of the rectangle.
mxRectangle.prototype.height
Holds the height of the rectangle.
mxRectangle.prototype.setRect = function(x,
y,
w,
h)
Sets this rectangle to the specified values
mxRectangle.prototype.getCenterX = function ()
Returns the x-coordinate of the center point.
mxRectangle.prototype.getCenterY = function ()
Returns the y-coordinate of the center point.
mxRectangle.prototype.add = function(rect)
Adds the given rectangle to this rectangle.
mxRectangle.prototype.intersect = function(rect)
Changes this rectangle to where it overlaps with the given rectangle.
mxRectangle.prototype.grow = function(amount)
Grows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.
mxRectangle.prototype.getPoint = function()
Returns the top, left corner as a new mxPoint.
mxRectangle.prototype.rotate90 = function()
Rotates this rectangle by 90 degree around its center point.
mxRectangle.prototype.equals = function(obj)
Returns true if the given object equals this rectangle.
mxRectangle.fromRectangle = function(rect)
Returns a new mxRectangle which is a copy of the given rectangle.
animateChanges: function(graph,
changes,
done)
Asynchronous animated move operation.
cascadeOpacity: function(graph,
cell,
opacity)
Sets the opacity on the given cell and its descendants.
fadeOut: function(node,
from,
remove,
step,
delay,
isEnabled)
Asynchronous fade-out operation.
removeCursors: function(element)
Removes the cursors from the style of the given DOM node and its descendants.
getCurrentStyle: function()
Returns the current style of the specified element.
parseCssNumber: function(value)
Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).
setPrefixedStyle: function()
Adds the given style with the standard name and an optional vendor prefix for the current browser.
hasScrollbars: function(node)
Returns true if the overflow CSS property of the given node is either scroll or auto.
bind: function(scope,
funct)
Returns a wrapper function that locks the execution scope of the given function to the specified scope.
eval: function(expr)
Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.
findNode: function(node,
attr,
value)
Returns the first node where attr equals value.
getFunctionName: function(f)
Returns the name for the given function.
indexOf: function(array,
obj)
Returns the index of obj in array or -1 if the array does not contain the given object.
forEach: function(array,
fn)
Calls the given function for each element of the given array and returns the array.
remove: function(obj,
array)
Removes all occurrences of the given object in the given array or object.
isNode: function(value,
nodeName,
attributeName,
attributeValue)
Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.
isAncestorNode: function(ancestor,
child)
Returns true if the given ancestor is an ancestor of the given DOM node in the DOM.
getChildNodes: function(node,
nodeType)
Returns an array of child nodes that are of the given node type.
importNode: function(doc,
node,
allChildren)
Cross browser implementation for document.importNode.
createXmlDocument: function()
Returns a new, empty XML document.
parseXml: function()
Parses the specified XML string into a new XML document and returns the new document.
clearSelection: function()
Clears the current selection in the page.
removeWhitespace: function(node,
before)
Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.
htmlEntities: function(s,
newline)
Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.
isVml: function(node)
Returns true if the given node is in the VML namespace.
getXml: function(node,
linefeed)
Returns the XML content of the specified node.
extractTextWithWhitespace: function(elems)
Returns the text content of the specified node.
replaceTrailingNewlines: function(str,
pattern)
Replaces each trailing newline with the given pattern.
getTextContent: function(node)
Returns the text content of the specified node.
setTextContent: function(node,
text)
Sets the text content of the specified node.
getInnerHtml: function()
Returns the inner HTML for the given node as a string or an empty string if no node was specified.
getOuterHtml: function()
Returns the outer HTML for the given node as a string or an empty string if no node was specified.
write: function(parent,
text)
Creates a text node for the given string and appends it to the given parent.
writeln: function(parent,
text)
Creates a text node for the given string and appends it to the given parent with an additional linefeed.
br: function(parent,
count)
Appends a linebreak to the given parent and returns the linebreak.
button: function(label,
funct,
doc)
Returns a new button with the given level and function as an onclick event handler.
para: function(parent,
text)
Appends a new paragraph with the given text to the specified parent and returns the paragraph.
addTransparentBackgroundFilter: function(node)
Adds a transparent background to the filter of the given node.
linkAction: function(parent,
text,
editor,
action,
pad)
Adds a hyperlink to the specified parent that invokes action on the specified editor.
linkInvoke: function(parent,
text,
editor,
functName,
arg,
pad)
Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.
link: function(parent,
text,
funct,
pad)
Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.
getDocumentSize: function()
Returns the client size for the current document as an mxRectangle.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
fit: function(node)
Makes sure the given node is inside the visible area of the window.
load: function(url)
Loads the specified URL synchronously and returns the mxXmlRequest.
XML HTTP request wrapper.
get: function(url,
onload,
onerror,
binary,
timeout,
ontimeout)
Loads the specified URL asynchronously and invokes the given functions depending on the request status.
getAll: function(urls,
onload,
onerror)
Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.
post: function(url,
params,
onload,
onerror)
Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.
submit: function(url,
params,
doc,
target)
Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.
mxXmlRequest.prototype.simulate = function(doc,
target)
Creates and posts a request to the given target URL using a dynamically created form inside the given document.
loadInto: function(url,
doc,
onload)
Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.
getValue: function(array,
key,
defaultValue)
Returns the value for the given key in the given associative array or the given default value if the value is null.
getNumber: function(array,
key,
defaultValue)
Returns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.
getColor: function(array,
key,
defaultValue)
Returns the color value for the given key in the given associative array or the given default value if the value is null.
clone: function(obj,
transients,
shallow)
Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
equalPoints: function(a,
b)
Compares all mxPoints in the given lists.
equalEntries: function(a,
b)
Returns true if all properties of the given objects are equal.
removeDuplicates: function(arr)
Removes all duplicates from the given array.
isNaN: function(value)
Returns true if the given value is of type number and isNaN returns true.
extend: function(ctor,
superCtor)
Assigns a copy of the superclass prototype to the subclass prototype.
toString: function(obj)
Returns a textual representation of the specified object.
toRadians: function(deg)
Converts the given degree to radians.
toDegree: function(rad)
Converts the given radians to degree.
arcToCurves: function(x0,
y0,
r1,
r2,
angle,
largeArcFlag,
sweepFlag,
x,
y)
Converts the given arc to a series of curves.
getBoundingBox: function(rect,
rotation,
cx)
Returns the bounding box for the rotated rectangle.
getRotatedPoint: function(pt,
cos,
sin,
c)
Rotates the given point by the given cos and sin.
reversePortConstraints: function(constraint)
Reverse the port constraint bitmask.
findNearestSegment: function(state,
x,
y)
Finds the index of the nearest segment on the given cell state for the specified coordinate pair.
getDirectedBounds: function (rect,
m,
style,
flipH,
flipV)
Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.
getPerimeterPoint: function (pts,
center,
point)
Returns the intersection between the polygon defined by the array of points and the line between center and point.
rectangleIntersectsSegment: function(bounds,
p1,
p2)
Returns true if the given rectangle intersects the given segment.
contains: function(bounds,
x,
y)
Returns true if the specified point (x, y) is contained in the given rectangle.
intersects: function(a,
b)
Returns true if the two rectangles intersect.
getOffset: function(container,
scrollOffset)
Returns the offset for the specified container as an mxPoint.
getDocumentScrollOrigin: function(doc)
Returns the scroll origin of the given document or the current document if no document is given.
getScrollOrigin: function(node,
includeAncestors,
includeDocument)
Returns the top, left corner of the viewrect as an mxPoint.
convertPoint: function(container,
x,
y)
Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
ltrim: function(str,
chars)
Strips all whitespaces from the beginning of the string.
rtrim: function(str,
chars)
Strips all whitespaces from the end of the string.
trim: function(str,
chars)
Strips all whitespaces from both end of the string.
isNumeric: function(n)
Returns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.
isInteger: function(n)
Returns true if the given value is an valid integer number.
mod: function(n,
m)
Returns the remainder of division of n by m.
intersection: function (x0,
y0,
x1,
y1,
x2,
y2,
x3,
y3)
Returns the intersection of two lines as an mxPoint.
ptSegDistSq: function(x1,
y1,
x2,
y2,
px,
py)
Returns the square distance between a segment and a point.
ptLineDist: function(x1,
y1,
x2,
y2,
px,
py)
Returns the distance between a line defined by two points and a point.
relativeCcw: function(x1,
y1,
x2,
y2,
px,
py)
Returns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.
animateChanges: function(graph,
changes)
See mxEffects.animateChanges.
cascadeOpacity: function(graph,
cell,
opacity)
See mxEffects.cascadeOpacity.
fadeOut: function(node,
from,
remove,
step,
delay,
isEnabled)
See mxEffects.fadeOut.
setOpacity: function(node,
value)
Sets the opacity of the specified DOM node to the given value in %.
createImage: function(src)
Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.
sortCells: function(cells,
ascending)
Sorts the given cells according to the order in the cell hierarchy.
getStylename: function(style)
Returns the stylename in a style of the form [(stylename|key=value);] or an empty string if the given style does not contain a stylename.
getStylenames: function(style)
Returns the stylenames in a style of the form [(stylename|key=value);] or an empty array if the given style does not contain any stylenames.
indexOfStylename: function(style,
stylename)
Returns the index of the given stylename in the given style.
addStylename: function(style,
stylename)
Adds the specified stylename to the given style if it does not already contain the stylename.
removeStylename: function(style,
stylename)
Removes all occurrences of the specified stylename in the given style and returns the updated style.
removeAllStylenames: function(style)
Removes all stylenames from the given style and returns the updated style.
setCellStyles: function(model,
cells,
key,
value)
Assigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.
setStyle: function(style,
key,
value)
Adds or removes the given key, value pair to the style and returns the new style.
setCellStyleFlags: function(model,
cells,
key,
flag,
value)
Sets or toggles the flag bit for the given key in the cell’s styles.
setStyleFlag: function(style,
key,
flag,
value)
Sets or removes the given key from the specified style and returns the new style.
getAlignmentAsPoint: function(align,
valign)
Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations.
getSizeForString: function(text,
fontSize,
fontFamily,
textWidth)
Returns an mxRectangle with the size (width and height in pixels) of the given string.
getViewXml: function(graph,
scale,
cells,
x0,
y0)
getScaleForPageCount: function(pageCount,
graph,
pageFormat,
border)
Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
show: function(graph,
doc,
x0,
y0,
w,
h)
Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles.
printScreen: function(graph)
Prints the specified graph using a new window and the built-in print dialog.
popup: function(content,
isInternalWindow)
Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
Basic window inside a document.
alert: function(message)
Displayss the given alert in a new dialog.
prompt: function(message,
defaultValue)
Displays the given message in a prompt dialog.
confirm: function(message)
Displays the given message in a confirm dialog.
error: function(message,
width,
close,
icon)
Displays the given error message in a new mxWindow of the given width.
makeDraggable: function(element,
graphF,
funct,
dragElement,
dx,
dy,
autoscroll,
scalePreview,
highlightDropTargets,
getDropTarget)
Configures the given DOM element to act as a drag source for the specified graph.
Defines the key for the text direction style.
Extends mxShape to implement an image shape with a label.
OrthConnector: function(state,
source,
target,
points,
result)
Implements a local orthogonal router between the given cells.
Extends mxShape to implement a rectangle shape.
Renders cells into a document object model.
Extends mxShape to implement an ellipse shape.
Extends mxShape to implement a double ellipse shape.
Extends mxShape to implement a rhombus (aka diamond) shape.
Extends mxShape to implement a horizontal line shape.
Extends mxShape to implement an image shape.
Extends mxShape to implement an arrow shape.
Extends mxShape to implement an new rounded arrow shape with support for waypoints and double arrows.
Extends mxShape to implement an cylinder shape.
Extends mxShape to implement a swimlane shape.
Extends mxShape to implement a connector shape.
Extends mxShape to implement an actor shape.
Extends mxActor to implement a cloud shape.
Implementation of the triangle shape.
Implementation of the hexagon shape.
PERIMETER_TRIANGLE: 'trianglePerimeter' }
Name of the triangle perimeter.
function mxEventObject(name)
Constructs a new event object with the specified name.
mxEventObject.prototype.name
Holds the name.
mxEventObject.prototype.properties
Holds the properties as an associative array.
mxEventObject.prototype.consumed
Holds the consumed state.
mxEventObject.prototype.getName = function()
Returns name.
mxEventObject.prototype.getProperties = function()
Returns properties.
mxEventObject.prototype.getProperty = function(key)
Returns the property for the given key.
mxEventObject.prototype.isConsumed = function()
Returns true if the event has been consumed.
mxEventObject.prototype.consume = function()
Consumes the event.
function mxMouseEvent(evt,
state)
Constructs a new event object for the given arguments.
mxMouseEvent.prototype.consumed
Holds the consumed state of this event.
mxMouseEvent.prototype.evt
Holds the inner event object.
mxMouseEvent.prototype.graphX
Holds the x-coordinate of the event in the graph.
mxMouseEvent.prototype.graphY
Holds the y-coordinate of the event in the graph.
mxMouseEvent.prototype.state
Holds the optional mxCellState associated with this event.
Represents the current state of a cell in a given mxGraphView.
mxMouseEvent.prototype.sourceState
Holds the mxCellState that was passed to the constructor.
mxMouseEvent.prototype.getEvent = function()
Returns evt.
mxMouseEvent.prototype.getSource = function()
Returns the target DOM element using mxEvent.getSource for evt.
getSource: function(evt)
Returns the event’s target or srcElement depending on the browser.
mxMouseEvent.prototype.isSource = function(shape)
Returns true if the given mxShape is the source of evt.
Base class for all shapes.
mxMouseEvent.prototype.getX = function()
Returns evt.clientX.
mxMouseEvent.prototype.getY = function()
Returns evt.clientY.
mxMouseEvent.prototype.getGraphX = function()
Returns graphX.
mxMouseEvent.prototype.getGraphY = function()
Returns graphY.
mxMouseEvent.prototype.getState = function()
Returns state.
mxMouseEvent.prototype.getCell = function()
Returns the mxCell in state is not null.
Cells are the elements of the graph model.
mxMouseEvent.prototype.isPopupTrigger = function()
Returns true if the event is a popup trigger.
mxMouseEvent.prototype.isConsumed = function()
Returns consumed.
mxMouseEvent.prototype.consume = function(preventDefault)
Sets consumed to true and invokes preventDefault on the native event if such a method is defined.
function mxEventSource(eventSource)
Constructs a new event source.
mxEventSource.prototype.eventListeners
Holds the event names and associated listeners in an array.
mxEventSource.prototype.eventsEnabled
Specifies if events can be fired.
mxEventSource.prototype.eventSource
Optional source for events.
mxEventSource.prototype.isEventsEnabled = function()
Returns eventsEnabled.
mxEventSource.prototype.setEventsEnabled = function(value)
Sets eventsEnabled.
mxEventSource.prototype.getEventSource = function()
Returns eventSource.
mxEventSource.prototype.setEventSource = function(value)
Sets eventSource.
mxEventSource.prototype.addListener = function(name,
funct)
Binds the specified function to the given event name.
mxEventSource.prototype.removeListener = function(funct)
Removes all occurrences of the given listener from eventListeners.
mxEventSource.prototype.fireEvent = function(evt,
sender)
Dispatches the given event to the listeners which are registered for the event.
addListener: function()
Binds the function to the specified event on the given element.
removeListener: function()
Removes the specified listener from the given element.
removeAllListeners: function(element)
Removes all listeners from the given element.
addGestureListeners: function(node,
startListener,
moveListener,
endListener)
Adds the given listeners for touch, mouse and/or pointer events.
removeGestureListeners: function(node,
startListener,
moveListener,
endListener)
Removes the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.
True if this device supports touchstart/-move/-end events (Apple iOS, Android, Chromebook and Chrome Browser on touch-enabled devices).
redirectMouseEvents: function(node,
graph,
state,
down,
move,
up,
dblClick)
Redirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments.
release: function(element)
Removes the known listeners from the given DOM node and its descendants.
disableContextMenu: function(element)
Disables the context menu for the given element.
isConsumed: function(evt)
Returns true if the event has been consumed using consume.
consume: function(evt,
preventDefault,
stopPropagation)
Consumes the given event.
isTouchEvent: function(evt)
Returns true if the event was generated using a touch device (not a pen or mouse).
isPenEvent: function(evt)
Returns true if the event was generated using a pen (not a touch device or mouse).
isMultiTouchEvent: function(evt)
Returns true if the event was generated using a touch device (not a pen or mouse).
isMouseEvent: function(evt)
Returns true if the event was generated using a mouse (not a pen or touch device).
isLeftMouseButton: function(evt)
Returns true if the left mouse button is pressed for the given event.
isMiddleMouseButton: function(evt)
Returns true if the middle mouse button is pressed for the given event.
isRightMouseButton: function(evt)
Returns true if the right mouse button was pressed.
isPopupTrigger: function(evt)
Returns true if the event is a popup trigger.
isShiftDown: function(evt)
Returns true if the shift key is pressed for the given event.
isAltDown: function(evt)
Returns true if the alt key is pressed for the given event.
isControlDown: function(evt)
Returns true if the control key is pressed for the given event.
isMetaDown: function(evt)
Returns true if the meta key is pressed for the given event.
getMainEvent: function(e)
Returns the touch or mouse event that contains the mouse coordinates.
getClientX: function(e)
Returns true if the meta key is pressed for the given event.
getClientY: function(e)
Returns true if the meta key is pressed for the given event.
RESET: 'reset' }
Specifies the event name for reset.
function mxXmlRequest(url,
params,
method,
async,
username,
password)
Constructs an XML HTTP request.
mxXmlRequest.prototype.url
Holds the target URL of the request.
mxXmlRequest.prototype.params
Holds the form encoded data for the POST request.
mxXmlRequest.prototype.method
Specifies the request method.
mxXmlRequest.prototype.async
Boolean indicating if the request is asynchronous.
mxXmlRequest.prototype.binary
Boolean indicating if the request is binary.
mxXmlRequest.prototype.withCredentials
Specifies if withCredentials should be used in HTML5-compliant browsers.
mxXmlRequest.prototype.username
Specifies the username to be used for authentication.
mxXmlRequest.prototype.password
Specifies the password to be used for authentication.
mxXmlRequest.prototype.request
Holds the inner, browser-specific request object.
mxXmlRequest.prototype.decodeSimulateValues
Specifies if request values should be decoded as URIs before setting the textarea value in simulate.
mxXmlRequest.prototype.isBinary = function()
Returns binary.
mxXmlRequest.prototype.setBinary = function(value)
Sets binary.
mxXmlRequest.prototype.getText = function()
Returns the response as a string.
mxXmlRequest.prototype.isReady = function()
Returns true if the response is ready.
mxXmlRequest.prototype.getDocumentElement = function()
Returns the document element of the response XML document.
mxXmlRequest.prototype.getXml = function()
Returns the response as an XML document.
mxXmlRequest.prototype.getStatus = function()
Returns the status as a number, eg.
mxXmlRequest.prototype.create = function()
Creates and returns the inner request object.
mxXmlRequest.prototype.send = function(onload,
onerror,
timeout,
ontimeout)
Send the request to the target URL using the specified functions to process the response asychronously.
mxXmlRequest.prototype.setRequestHeaders = function(request,
params)
Sets the headers for the given request and parameters.
setCells: function(cells)
Sets the cells in the clipboard.
getCells: function()
Returns the cells in the clipboard.
isEmpty: function()
Returns true if the clipboard currently has not data stored.
cut: function(graph,
cells)
Cuts the given array of mxCells from the specified graph.
removeCells: function(graph,
cells)
Hook to remove the given cells from the given graph after a cut operation.
copy: function(graph,
cells)
Copies the given array of mxCells from the specified graph to cells.
Holds the array of mxCells currently in the clipboard.
paste: function(graph)
Pastes the cells into the specified graph restoring the relation to parents, if possible.
function mxWindow(title,
content,
x,
y,
width,
height,
minimizable,
movable,
replaceNode,
style)
Constructs a new window with the given dimension and title to display the specified content.
mxWindow.prototype.closeImage
URL of the image to be used for the close icon in the titlebar.
mxWindow.prototype.minimizeImage
URL of the image to be used for the minimize icon in the titlebar.
mxWindow.prototype.normalizeImage
URL of the image to be used for the normalize icon in the titlebar.
mxWindow.prototype.maximizeImage
URL of the image to be used for the maximize icon in the titlebar.
mxWindow.prototype.visible
Boolean flag that represents the visible state of the window.
mxWindow.prototype.minimumSize
mxRectangle that specifies the minimum width and height of the window.
mxWindow.prototype.destroyOnClose
Specifies if the window should be destroyed when it is closed.
mxWindow.prototype.contentHeightCorrection
Defines the correction factor for computing the height of the contentWrapper.
mxWindow.prototype.title
Reference to the DOM node (TD) that contains the title.
mxWindow.prototype.content
Reference to the DOM node that represents the window content.
mxWindow.prototype.init = function(x,
y,
width,
height,
style)
Initializes the DOM tree that represents the window.
mxWindow.prototype.setTitle = function(title)
Sets the window title to the given string.
mxWindow.prototype.setScrollable = function(scrollable)
Sets if the window contents should be scrollable.
mxWindow.prototype.activate = function()
Puts the window on top of all other windows.
mxWindow.prototype.getElement = function()
Returuns the outermost DOM node that makes up the window.
mxWindow.prototype.fit = function()
Makes sure the window is inside the client area of the window.
mxWindow.prototype.isResizable = function()
Returns true if the window is resizable.
mxWindow.prototype.setResizable = function(resizable)
Sets if the window should be resizable.
mxWindow.prototype.setSize = function(width,
height)
Sets the size of the window.
mxWindow.prototype.setMinimizable = function(minimizable)
Sets if the window is minimizable.
mxWindow.prototype.getMinimumSize = function()
Returns an mxRectangle that specifies the size for the minimized window.
mxWindow.prototype.installMinimizeHandler = function()
Installs the event listeners required for minimizing the window.
mxWindow.prototype.setMaximizable = function(maximizable)
Sets if the window is maximizable.
mxWindow.prototype.installMaximizeHandler = function()
Installs the event listeners required for maximizing the window.
mxWindow.prototype.installMoveHandler = function()
Installs the event listeners required for moving the window.
mxWindow.prototype.setLocation = function(x,
y)
Sets the upper, left corner of the window.
mxWindow.prototype.getX = function()
Returns the current position on the x-axis.
mxWindow.prototype.getY = function()
Returns the current position on the y-axis.
mxWindow.prototype.installCloseHandler = function()
Adds the closeImage as a new image node in closeImg and installs the close event.
mxWindow.prototype.setImage = function(image)
Sets the image associated with the window.
mxWindow.prototype.setClosable = function(closable)
Sets the image associated with the window.
mxWindow.prototype.isVisible = function()
Returns true if the window is visible.
mxWindow.prototype.setVisible = function(visible)
Shows or hides the window depending on the given flag.
mxWindow.prototype.show = function()
Shows the window.
mxWindow.prototype.hide = function()
Hides the window.
mxWindow.prototype.destroy = function()
Destroys the window and removes all associated resources.
function mxForm(className)
Creates a HTML table using the specified classname.
mxForm.prototype.table
Holds the DOM node that represents the table.
mxForm.prototype.body
Holds the DOM node that represents the tbody (table body).
mxForm.prototype.getTable = function()
Returns the table that contains this form.
mxForm.prototype.addButtons = function(okFunct,
cancelFunct)
Helper method to add an OK and Cancel button using the respective functions.
mxForm.prototype.addText = function(name,
value,
type)
Adds an input for the given name, type and value and returns it.
mxForm.prototype.addCheckbox = function(name,
value)
Adds a checkbox for the given name and value and returns the textfield.
mxForm.prototype.addTextarea = function(name,
value,
rows)
Adds a textarea for the given name and value and returns the textarea.
mxForm.prototype.addCombo = function(name,
isMultiSelect,
size)
Adds a combo for the given name and returns the combo.
mxForm.prototype.addOption = function(combo,
label,
value,
isSelected)
Adds an option for the given label to the specified combo.
mxForm.prototype.addField = function(name,
input)
Adds a new row with the name and the input field in two columns and returns the given input.
function mxImage(src,
width,
height)
Constructs a new image.
mxImage.prototype.src
String that specifies the URL of the image.
mxImage.prototype.width
Integer that specifies the width of the image.
mxImage.prototype.height
Integer that specifies the height of the image.
function mxDivResizer(div,
container)
Constructs an object that maintains the size of a div element when the window is being resized.
mxDivResizer.prototype.resize = function()
Updates the style of the DIV after the window has been resized.
mxDivResizer.prototype.getDocumentWidth = function()
Hook for subclassers to return the width of the document (without scrollbars).
mxDivResizer.prototype.getDocumentHeight = function()
Hook for subclassers to return the height of the document (without scrollbars).
function mxDragSource(element,
dropHandler)
Constructs a new drag source for the given element.
mxDragSource.prototype.element
Reference to the DOM node which was made draggable.
mxDragSource.prototype.dropHandler
Holds the DOM node that is used to represent the drag preview.
mxDragSource.prototype.dragOffset
mxPoint that specifies the offset of the dragElement.
mxDragSource.prototype.dragElement
Holds the DOM node that is used to represent the drag preview.
mxDragSource.prototype.previewElement
Optional mxRectangle that specifies the unscaled size of the preview.
mxDragSource.prototype.enabled
Specifies if this drag source is enabled.
mxDragSource.prototype.currentGraph
Reference to the mxGraph that is the current drop target.
mxDragSource.prototype.currentDropTarget
Holds the current drop target under the mouse.
mxDragSource.prototype.currentPoint
Holds the current drop location.
mxDragSource.prototype.currentGuide
Holds an mxGuide for the currentGraph if dragPreview is not null.
Implements the alignment of selection cells to other cells in the graph.
mxDragSource.prototype.autoscroll
Specifies if the graph should scroll automatically.
mxDragSource.prototype.guidesEnabled
Specifies if mxGuide should be enabled.
mxDragSource.prototype.gridEnabled
Specifies if the grid should be allowed.
mxDragSource.prototype.highlightDropTargets
Specifies if drop targets should be highlighted.
mxDragSource.prototype.dragElementZIndex
ZIndex for the drag element.
mxDragSource.prototype.dragElementOpacity
Opacity of the drag element in %.
mxDragSource.prototype.checkEventSource
Whether the event source should be checked in graphContainerEvent.
mxDragSource.prototype.isEnabled = function()
Returns enabled.
mxDragSource.prototype.setEnabled = function(value)
Sets enabled.
mxDragSource.prototype.isGuidesEnabled = function()
Returns guidesEnabled.
mxDragSource.prototype.setGuidesEnabled = function(value)
Sets guidesEnabled.
mxDragSource.prototype.isGridEnabled = function()
Returns gridEnabled.
mxDragSource.prototype.setGridEnabled = function(value)
Sets gridEnabled.
mxDragSource.prototype.getGraphForEvent = function(evt)
Returns the graph for the given mouse event.
mxDragSource.prototype.getDropTarget = function(graph,
x,
y,
evt)
Returns the drop target for the given graph and coordinates.
mxDragSource.prototype.createDragElement = function(evt)
Creates and returns a clone of the dragElementPrototype or the element if the former is not defined.
mxDragSource.prototype.createPreviewElement = function(graph)
Creates and returns an element which can be used as a preview in the given graph.
mxDragSource.prototype.isActive = function()
Returns true if this drag source is active.
mxDragSource.prototype.reset = function()
Stops and removes everything and restores the state of the object.
mxDragSource.prototype.mouseDown = function(evt)
Returns the drop target for the given graph and coordinates.
mxDragSource.prototype.startDrag = function(evt)
Creates the dragElement using createDragElement.
mxDragSource.prototype.stopDrag = function()
Invokes removeDragElement.
mxDragSource.prototype.removeDragElement = function()
Removes and destroys the dragElement.
mxDragSource.prototype.getElementForEvent = function(evt)
Returns the topmost element under the given event.
mxDragSource.prototype.graphContainsEvent = function(graph,
evt)
Returns true if the given graph contains the given event.
mxDragSource.prototype.mouseMove = function(evt)
Gets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.
mxDragSource.prototype.dragEnter = function(graph,
evt)
Actives the given graph as a drop target.
mxDragSource.prototype.dragExit = function(graph,
evt)
Deactivates the given graph as a drop target.
mxDragSource.prototype.dragOver = function(graph,
evt)
Implements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.
mxDragSource.prototype.mouseUp = function(evt)
Processes the mouse up event and invokes drop, dragExit and stopDrag as required.
mxDragSource.prototype.drop = function(graph,
evt,
dropTarget,
x,
y)
Returns the drop target for the given graph and coordinates.
mxDragSource.prototype.removeListeners = function()
Actives the given graph as a drop target.
function mxToolbar(container)
Constructs a toolbar in the specified container.
mxToolbar.prototype.container
Reference to the DOM nodes that contains the toolbar.
mxToolbar.prototype.enabled
Specifies if events are handled.
mxToolbar.prototype.noReset
Specifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar.
mxToolbar.prototype.resetMode = function(forced)
Selects the default mode and resets the state of the previously selected mode.
mxToolbar.prototype.updateDefaultMode
Boolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode.
mxToolbar.prototype.addItem = function(title,
icon,
funct,
pressedIcon,
style,
factoryMethod)
Adds the given function as an image with the specified title and icon and returns the new image node.
mxToolbar.prototype.addCombo = function(style)
Adds and returns a new SELECT element using the given style.
mxToolbar.prototype.addOption = function(combo,
title,
value)
Adds and returns a new OPTION element inside the given SELECT element.
mxToolbar.prototype.addSwitchMode = function(title,
icon,
funct,
pressedIcon,
style)
Adds a new selectable item to the toolbar.
mxToolbar.prototype.addMode = function(title,
icon,
funct,
pressedIcon,
style,
toggle)
Adds a new item to the toolbar.
mxToolbar.prototype.selectMode = function(domNode,
funct)
Resets the state of the previously selected mode and displays the given DOM node as selected.
mxToolbar.prototype.addSeparator = function(icon)
Adds the specifies image as a separator.
mxToolbar.prototype.addBreak = function()
Adds a break to the container.
mxToolbar.prototype.addLine = function()
Adds a horizontal line to the container.
mxToolbar.prototype.destroy = function ()
Removes the toolbar and all its associated resources.
mxUndoableEdit.prototype.undo = function()
Undoes all changes in this edit.
mxUndoableEdit.prototype.redo = function()
Redoes all changes in this edit.
function mxUndoableEdit(source,
significant)
Constructs a new undoable edit for the given source.
mxUndoableEdit.prototype.source
Specifies the source of the edit.
mxUndoableEdit.prototype.changes
Array that contains the changes that make up this edit.
mxUndoableEdit.prototype.significant
Specifies if the undoable change is significant.
mxUndoableEdit.prototype.undone
Specifies if this edit has been undone.
mxUndoableEdit.prototype.redone
Specifies if this edit has been redone.
mxUndoableEdit.prototype.isEmpty = function()
Returns true if the this edit contains no changes.
mxUndoableEdit.prototype.isSignificant = function()
Returns significant.
mxUndoableEdit.prototype.add = function(change)
Adds the specified change to this edit.
mxUndoableEdit.prototype.notify = function()
Hook to notify any listeners of the changes after an undo or redo has been carried out.
mxUndoableEdit.prototype.die = function()
Hook to free resources after the edit has been removed from the command history.
mxUndoManager.prototype.clear = function()
Clears the command history.
mxUndoManager.prototype.undo = function()
Undoes the last change.
mxUndoManager.prototype.redo = function()
Redoes the last change.
function mxUndoManager(size)
Constructs a new undo manager with the given history size.
mxUndoManager.prototype.size
Maximum command history size.
mxUndoManager.prototype.history
Array that contains the steps of the command history.
mxUndoManager.prototype.indexOfNextAdd
Index of the element to be added next.
mxUndoManager.prototype.isEmpty = function()
Returns true if the history is empty.
mxUndoManager.prototype.canUndo = function()
Returns true if an undo is possible.
mxUndoManager.prototype.canRedo = function()
Returns true if a redo is possible.
mxUndoManager.prototype.undoableEditHappened = function(undoableEdit)
Method to be called to add new undoable edits to the history.
mxUndoManager.prototype.trim = function()
Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit.
mxUrlConverter.prototype.enabled
Specifies if the converter is enabled.
mxUrlConverter.prototype.baseUrl
Specifies the base URL to be used as a prefix for relative URLs.
mxUrlConverter.prototype.baseDomain
Specifies the base domain to be used as a prefix for absolute URLs.
mxUrlConverter.prototype.updateBaseUrl = function()
Private helper function to update the base URL.
mxUrlConverter.prototype.isEnabled = function()
Returns enabled.
mxUrlConverter.prototype.setEnabled = function(value)
Sets enabled.
mxUrlConverter.prototype.getBaseUrl = function()
Returns baseUrl.
mxUrlConverter.prototype.setBaseUrl = function(value)
Sets baseUrl.
mxUrlConverter.prototype.getBaseDomain = function()
Returns baseDomain.
mxUrlConverter.prototype.setBaseDomain = function(value)
Sets baseDomain.
mxUrlConverter.prototype.isRelativeUrl = function(url)
Returns true if the given URL is relative.
mxUrlConverter.prototype.convert = function(url)
Converts the given URL to an absolute URL with protol and domain.
mxPanningManager.prototype.damper
Damper value for the panning.
mxPanningManager.prototype.delay
Delay in milliseconds for the panning.
mxPanningManager.prototype.handleMouseOut
Specifies if mouse events outside of the component should be handled.
mxPanningManager.prototype.border
Border to handle automatic panning inside the component.
mxPopupMenu.prototype.popup = function(x,
y,
cell,
evt)
Shows the popup menu for the given event and cell.
mxPopupMenu.prototype.submenuImage
URL of the image to be used for the submenu icon.
mxPopupMenu.prototype.zIndex
Specifies the zIndex for the popupmenu and its shadow.
mxPopupMenu.prototype.factoryMethod
Function that is used to create the popup menu.
mxPopupMenu.prototype.useLeftButtonForPopup
Specifies if popupmenus should be activated by clicking the left mouse button.
mxPopupMenu.prototype.enabled
Specifies if events are handled.
mxPopupMenu.prototype.itemCount
Contains the number of times addItem has been called for a new menu.
mxPopupMenu.prototype.addItem = function(title,
image,
funct,
parent,
iconCls,
enabled,
active)
Adds the given item to the given parent item.
mxPopupMenu.prototype.autoExpand
Specifies if submenus should be expanded on mouseover.
mxPopupMenu.prototype.smartSeparators
Specifies if separators should only be added if a menu item follows them.
mxPopupMenu.prototype.labels
Specifies if any labels should be visible.
mxPopupMenu.prototype.init = function()
Initializes the shapes required for this vertex handler.
mxPopupMenu.prototype.isEnabled = function()
Returns true if events are handled.
mxPopupMenu.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxPopupMenu.prototype.isPopupTrigger = function(me)
Returns true if the given event is a popupmenu trigger for the optional given cell.
mxPopupMenu.prototype.createSubmenu = function(parent)
Creates the nodes required to add submenu items inside the given parent item.
mxPopupMenu.prototype.showSubmenu = function(parent,
row)
Shows the submenu inside the given parent row.
mxPopupMenu.prototype.addSeparator = function(parent,
force)
Adds a horizontal separator in the given parent item or the top-level menu if no parent is specified.
mxPopupMenu.prototype.isMenuShowing = function()
Returns true if the menu is showing.
mxPopupMenu.prototype.showMenu = function()
Shows the menu.
mxPopupMenu.prototype.hideMenu = function()
Removes the menu and all submenus.
mxPopupMenu.prototype.hideSubmenu = function(parent)
Removes all submenus inside the given parent.
mxPopupMenu.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxAutoSaveManager(graph)
Constructs a new automatic layout for the given graph.
mxAutoSaveManager.prototype.graph
Reference to the enclosing mxGraph.
mxAutoSaveManager.prototype.autoSaveDelay
Minimum amount of seconds between two consecutive autosaves.
mxAutoSaveManager.prototype.autoSaveThrottle
Minimum amount of seconds between two consecutive autosaves triggered by more than autoSaveThreshhold changes within a timespan of less than autoSaveDelay seconds.
mxAutoSaveManager.prototype.autoSaveThreshold
Minimum amount of ignored changes before an autosave.
mxAutoSaveManager.prototype.ignoredChanges
Counter for ignored changes in autosave.
mxAutoSaveManager.prototype.lastSnapshot
Used for autosaving.
mxAutoSaveManager.prototype.enabled
Specifies if event handling is enabled.
mxAutoSaveManager.prototype.changeHandler
Holds the function that handles graph model changes.
mxAutoSaveManager.prototype.isEnabled = function()
Returns true if events are handled.
mxAutoSaveManager.prototype.setEnabled = function(value)
Enables or disables event handling.
mxAutoSaveManager.prototype.setGraph = function(graph)
Sets the graph that the layouts operate on.
mxAutoSaveManager.prototype.save = function()
Empty hook that is called if the graph should be saved.
mxAutoSaveManager.prototype.graphModelChanged = function(changes)
Invoked when the graph model has changed.
mxAutoSaveManager.prototype.reset = function()
Resets all counters.
mxAutoSaveManager.prototype.destroy = function()
Removes all handlers from the graph and deletes the reference to it.
function mxAnimation(delay)
Constructs an animation.
mxAnimation.prototype.delay
Specifies the delay between the animation steps.
mxAnimation.prototype.thread
Reference to the thread while the animation is running.
mxAnimation.prototype.isRunning = function()
Returns true if the animation is running.
mxAnimation.prototype.startAnimation = function()
Starts the animation by repeatedly invoking updateAnimation.
mxAnimation.prototype.updateAnimation = function()
Hook for subclassers to implement the animation.
mxAnimation.prototype.stopAnimation = function()
Stops the animation by deleting the timer and fires an mxEvent.DONE.
Specifies the event name for done.
function mxMorphing(graph,
steps,
ease,
delay)
Constructs an animation.
mxMorphing.prototype.graph
Specifies the delay between the animation steps.
mxMorphing.prototype.steps
Specifies the maximum number of steps for the morphing.
mxMorphing.prototype.step
Contains the current step.
mxMorphing.prototype.ease
Ease-off for movement towards the given vector.
mxMorphing.prototype.cells
Optional array of cells to be animated.
mxMorphing.prototype.updateAnimation = function()
Animation step.
mxMorphing.prototype.show = function(move)
Shows the changes in the given mxCellStatePreview.
Implements a live preview for moving cells.
mxMorphing.prototype.animateCell = function(cell,
move,
recurse)
Animates the given cell state using mxCellStatePreview.moveState.
mxCellStatePreview.prototype.moveState = function(state,
dx,
dy,
add,
includeEdges)
mxMorphing.prototype.stopRecursion = function(state,
delta)
Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.
mxMorphing.prototype.getDelta = function(state)
Returns the vector between the current rendered state and the future location of the state after the display will be updated.
mxMorphing.prototype.getOriginForCell = function(cell)
Returns the top, left corner of the given cell.
mxImageBundle.prototype.images
Maps from keys to images.
mxImageBundle.prototype.putImage = function(key,
value,
fallback)
Adds the specified entry to the map.
mxImageBundle.prototype.getImage = function(key)
Returns the value for the given key.
function mxImageExport()
Constructs a new image export.
mxImageExport.prototype.includeOverlays
Specifies if overlays should be included in the export.
mxImageExport.prototype.drawState = function(state,
canvas)
Draws the given state and all its descendants to the given canvas.
mxImageExport.prototype.getLinkForCellState = function(state,
canvas)
Returns the link for the given cell state and canvas.
mxImageExport.prototype.drawCellState = function(state,
canvas)
Draws the given state to the given canvas.
mxImageExport.prototype.drawShape = function(state,
canvas)
Draws the shape of the given state.
mxImageExport.prototype.drawText = function(state,
canvas)
Draws the text of the given state.
mxImageExport.prototype.drawOverlays = function(state,
canvas)
Draws the overlays for the given state.
function mxAbstractCanvas2D()
Constructs a new abstract canvas.
this.converter
Holds the mxUrlConverter to convert image URLs.
Converts relative and absolute URLs to absolute URLs with protocol and domain.
mxAbstractCanvas2D.prototype.state
Holds the current state.
mxAbstractCanvas2D.prototype.states
Stack of states.
mxAbstractCanvas2D.prototype.path
Holds the current path as an array.
mxAbstractCanvas2D.prototype.rotateHtml
Switch for rotation of HTML.
mxAbstractCanvas2D.prototype.lastX
Holds the last x coordinate.
mxAbstractCanvas2D.prototype.lastY
Holds the last y coordinate.
mxAbstractCanvas2D.prototype.moveOp
Contains the string used for moving in paths.
mxAbstractCanvas2D.prototype.lineOp
Contains the string used for moving in paths.
mxAbstractCanvas2D.prototype.quadOp
Contains the string used for quadratic paths.
mxAbstractCanvas2D.prototype.curveOp
Contains the string used for bezier curves.
mxAbstractCanvas2D.prototype.closeOp
Holds the operator for closing curves.
mxAbstractCanvas2D.prototype.pointerEvents
Boolean value that specifies if events should be handled.
mxAbstractCanvas2D.prototype.createUrlConverter = function()
Create a new mxUrlConverter and returns it.
mxAbstractCanvas2D.prototype.reset = function()
Resets the state of this canvas.
mxAbstractCanvas2D.prototype.createState = function()
Creates the state of the this canvas.
mxAbstractCanvas2D.prototype.format = function(value)
Rounds all numbers to integers.
mxAbstractCanvas2D.prototype.addOp = function()
Adds the given operation to the path.
mxAbstractCanvas2D.prototype.rotatePoint = function(x,
y,
theta,
cx,
cy)
Rotates the given point and returns the result as an mxPoint.
mxAbstractCanvas2D.prototype.save = function()
Saves the current state.
mxAbstractCanvas2D.prototype.restore = function()
Restores the current state.
mxAbstractCanvas2D.prototype.setLink = function(link)
Sets the current link.
mxAbstractCanvas2D.prototype.scale = function(value)
Scales the current state.
mxAbstractCanvas2D.prototype.translate = function(dx,
dy)
Translates the current state.
mxAbstractCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Rotates the current state.
mxAbstractCanvas2D.prototype.setAlpha = function(value)
Sets the current alpha.
mxAbstractCanvas2D.prototype.setFillAlpha = function(value)
Sets the current solid fill alpha.
mxAbstractCanvas2D.prototype.setStrokeAlpha = function(value)
Sets the current stroke alpha.
mxAbstractCanvas2D.prototype.setFillColor = function(value)
Sets the current fill color.
mxAbstractCanvas2D.prototype.setGradient = function(color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2)
Sets the current gradient.
mxAbstractCanvas2D.prototype.setStrokeColor = function(value)
Sets the current stroke color.
mxAbstractCanvas2D.prototype.setStrokeWidth = function(value)
Sets the current stroke width.
mxAbstractCanvas2D.prototype.setDashed = function(value,
fixDash)
Enables or disables dashed lines.
mxAbstractCanvas2D.prototype.setDashPattern = function(value)
Sets the current dash pattern.
mxAbstractCanvas2D.prototype.setLineCap = function(value)
Sets the current line cap.
mxAbstractCanvas2D.prototype.setLineJoin = function(value)
Sets the current line join.
mxAbstractCanvas2D.prototype.setMiterLimit = function(value)
Sets the current miter limit.
mxAbstractCanvas2D.prototype.setFontColor = function(value)
Sets the current font color.
mxAbstractCanvas2D.prototype.setFontSize = function(value)
Sets the current font size.
mxAbstractCanvas2D.prototype.setFontFamily = function(value)
Sets the current font family.
mxAbstractCanvas2D.prototype.setFontStyle = function(value)
Sets the current font style.
mxAbstractCanvas2D.prototype.setShadow = function(enabled)
Enables or disables and configures the current shadow.
mxAbstractCanvas2D.prototype.setShadowColor = function(value)
Enables or disables and configures the current shadow.
mxAbstractCanvas2D.prototype.setShadowAlpha = function(value)
Enables or disables and configures the current shadow.
mxAbstractCanvas2D.prototype.setShadowOffset = function(dx,
dy)
Enables or disables and configures the current shadow.
mxAbstractCanvas2D.prototype.begin = function()
Starts a new path.
mxAbstractCanvas2D.prototype.moveTo = function(x,
y)
Moves the current path the given coordinates.
mxAbstractCanvas2D.prototype.lineTo = function(x,
y)
Draws a line to the given coordinates.
mxAbstractCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)
Adds a quadratic curve to the current path.
mxAbstractCanvas2D.prototype.curveTo = function(x1,
y1,
x2,
y2,
x3,
y3)
Adds a bezier curve to the current path.
mxAbstractCanvas2D.prototype.arcTo = function(rx,
ry,
angle,
largeArcFlag,
sweepFlag,
x,
y)
Adds the given arc to the current path.
mxAbstractCanvas2D.prototype.close = function(x1,
y1,
x2,
y2,
x3,
y3)
Closes the current path.
mxAbstractCanvas2D.prototype.end = function()
Empty implementation for backwards compatibility.
function mxXmlCanvas2D(root)
Constructs a new abstract canvas.
this.root
Reference to the container for the SVG content.
mxXmlCanvas2D.prototype.textEnabled
Specifies if text output should be enabled.
mxXmlCanvas2D.prototype.compressed
Specifies if the output should be compressed by removing redundant calls.
mxXmlCanvas2D.prototype.writeDefaults = function()
mxXmlCanvas2D.prototype.format = function(value)
Returns a formatted number with 2 decimal places.
mxXmlCanvas2D.prototype.createElement = function(name)
Creates the given element using the owner document of root.
mxXmlCanvas2D.prototype.save = function()
Saves the drawing state.
mxXmlCanvas2D.prototype.restore = function()
Restores the drawing state.
mxXmlCanvas2D.prototype.scale = function(value)
Scales the output.
mxXmlCanvas2D.prototype.translate = function(dx,
dy)
Translates the output.
mxXmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Rotates and/or flips the output around a given center.
mxXmlCanvas2D.prototype.setAlpha = function(value)
Sets the current alpha.
mxXmlCanvas2D.prototype.setFillAlpha = function(value)
Sets the current fill alpha.
mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)
Sets the current stroke alpha.
mxXmlCanvas2D.prototype.setFillColor = function(value)
Sets the current fill color.
mxXmlCanvas2D.prototype.setGradient = function(color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2)
Sets the gradient.
mxXmlCanvas2D.prototype.setStrokeColor = function(value)
Sets the current stroke color.
mxXmlCanvas2D.prototype.setStrokeWidth = function(value)
Sets the current stroke width.
mxXmlCanvas2D.prototype.setDashed = function(value,
fixDash)
Enables or disables dashed lines.
mxXmlCanvas2D.prototype.setDashPattern = function(value)
Sets the current dash pattern.
mxXmlCanvas2D.prototype.setLineCap = function(value)
Sets the line cap.
mxXmlCanvas2D.prototype.setLineJoin = function(value)
Sets the line join.
mxXmlCanvas2D.prototype.setMiterLimit = function(value)
Sets the miter limit.
mxXmlCanvas2D.prototype.setFontColor = function(value)
Sets the current font color.
mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)
Sets the current font background color.
mxXmlCanvas2D.prototype.setFontBorderColor = function(value)
Sets the current font border color.
mxXmlCanvas2D.prototype.setFontSize = function(value)
Sets the current font size.
mxXmlCanvas2D.prototype.setFontFamily = function(value)
Sets the current font family.
mxXmlCanvas2D.prototype.setFontStyle = function(value)
Sets the current font style.
mxXmlCanvas2D.prototype.setShadow = function(value)
Enables or disables shadows.
mxXmlCanvas2D.prototype.setShadowColor = function(value)
Sets the current shadow color.
mxXmlCanvas2D.prototype.setShadowAlpha = function(value)
Sets the current shadows alpha.
mxXmlCanvas2D.prototype.setShadowOffset = function(dx,
dy)
Sets the current shadow offset.
mxXmlCanvas2D.prototype.rect = function(x,
y,
w,
h)
Puts a rectangle into the drawing buffer.
mxXmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)
Puts a rounded rectangle into the drawing buffer.
mxXmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)
Puts an ellipse into the drawing buffer.
mxXmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Paints an image.
mxXmlCanvas2D.prototype.begin = function()
Starts a new path and puts it into the drawing buffer.
mxXmlCanvas2D.prototype.moveTo = function(x,
y)
Moves the current path the given point.
mxXmlCanvas2D.prototype.lineTo = function(x,
y)
Draws a line to the given coordinates.
mxXmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)
Adds a quadratic curve to the current path.
mxXmlCanvas2D.prototype.curveTo = function(x1,
y1,
x2,
y2,
x3,
y3)
Adds a bezier curve to the current path.
mxXmlCanvas2D.prototype.close = function()
Closes the current path.
mxXmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)
Paints the given text.
mxXmlCanvas2D.prototype.stroke = function()
Paints the outline of the current drawing buffer.
mxXmlCanvas2D.prototype.fill = function()
Fills the current drawing buffer.
mxXmlCanvas2D.prototype.fillAndStroke = function()
Fills the current drawing buffer and its outline.
Base class for all canvases.
function mxSvgCanvas2D(root,
styleEnabled)
Constructs a new SVG canvas.
this.root
Reference to the container for the SVG content.
this.gradients
Local cache of gradients for quick lookups.
this.defs
Reference to the defs section of the SVG document.
this.styleEnabled
Stores the value of styleEnabled passed to the constructor.
mxSvgCanvas2D.prototype.matchHtmlAlignment
Specifies if plain text output should match the vertical HTML alignment.
mxSvgCanvas2D.prototype.textEnabled
Specifies if text output should be enabled.
mxSvgCanvas2D.prototype.foEnabled
Specifies if use of foreignObject for HTML markup is allowed.
mxSvgCanvas2D.prototype.foAltText
Specifies the fallback text for unsupported foreignObjects in exported documents.
mxSvgCanvas2D.prototype.foOffset
Offset to be used for foreignObjects.
mxSvgCanvas2D.prototype.textOffset
Offset to be used for text elements.
mxSvgCanvas2D.prototype.imageOffset
Offset to be used for image elements.
mxSvgCanvas2D.prototype.strokeTolerance
Adds transparent paths for strokes.
mxSvgCanvas2D.prototype.minStrokeWidth
Minimum stroke width for output.
mxSvgCanvas2D.prototype.refCount
Local counter for references in SVG export.
mxSvgCanvas2D.prototype.blockImagePointerEvents
Specifies if a transparent rectangle should be added on top of images to absorb all pointer events.
mxSvgCanvas2D.prototype.lineHeightCorrection
Correction factor for mxConstants.LINE_HEIGHT in HTML output.
Defines the default line height for text labels.
mxSvgCanvas2D.prototype.pointerEventsValue
Default value for active pointer events.
mxSvgCanvas2D.prototype.fontMetricsPadding
Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
mxSvgCanvas2D.prototype.cacheOffsetSize
Specifies if offsetWidth and offsetHeight should be cached.
mxSvgCanvas2D.prototype.format = function(value)
Rounds all numbers to 2 decimal points.
mxSvgCanvas2D.prototype.getBaseUrl = function()
Returns the URL of the page without the hash part.
mxSvgCanvas2D.prototype.reset = function()
Returns any offsets for rendering pixels.
mxSvgCanvas2D.prototype.createStyle = function(x)
Creates the optional style section.
mxSvgCanvas2D.prototype.createElement = function(tagName,
namespace)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.createGradientId = function(start,
end,
alpha1,
alpha2,
direction)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.getSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.createSvgGradient = function(start,
end,
alpha1,
alpha2,
direction)
Creates the given SVG gradient.
mxSvgCanvas2D.prototype.addNode = function(filled,
stroked)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.updateFill = function()
Transfers the stroke attributes from state to node.
mxSvgCanvas2D.prototype.getCurrentStrokeWidth = function()
Returns the current stroke width (>= 1), ie.
mxSvgCanvas2D.prototype.updateStroke = function()
Transfers the stroke attributes from state to node.
mxSvgCanvas2D.prototype.updateStrokeAttributes = function()
Transfers the stroke attributes from state to node.
mxSvgCanvas2D.prototype.createDashPattern = function(scale)
Creates the SVG dash pattern for the given state.
mxSvgCanvas2D.prototype.createTolerance = function(node)
Creates a hit detection tolerance shape for the given node.
mxSvgCanvas2D.prototype.createShadow = function(node)
Creates a shadow for the given node.
mxSvgCanvas2D.prototype.setLink = function(link)
Experimental implementation for hyperlinks.
mxSvgCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Sets the rotation of the canvas.
mxSvgCanvas2D.prototype.begin = function()
Extends superclass to create path.
mxSvgCanvas2D.prototype.rect = function(x,
y,
w,
h)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.ellipse = function(x,
y,
w,
h)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.convertHtml = function(val)
Converts the given HTML string to XHTML.
mxSvgCanvas2D.prototype.createDiv = function(str,
align,
valign,
style,
overflow,
whiteSpace)
Private helper function to create SVG elements
mxSvgCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)
Paints the given text.
mxSvgCanvas2D.prototype.createClip = function(x,
y,
w,
h)
Creates a clip for the given coordinates.
mxSvgCanvas2D.prototype.updateFont = function(node)
Updates the text properties for the given node.
mxSvgCanvas2D.prototype.addTextBackground = function(node,
str,
x,
y,
w,
h,
align,
valign,
overflow)
Background color and border
mxSvgCanvas2D.prototype.stroke = function()
Paints the outline of the current path.
mxSvgCanvas2D.prototype.fill = function()
Fills the current path.
mxSvgCanvas2D.prototype.fillAndStroke = function()
Fills and paints the outline of the current path.
this.root
Reference to the container for the SVG content.
mxVmlCanvas2D.prototype.textEnabled
Specifies if text output should be enabledetB.
mxVmlCanvas2D.prototype.moveOp
Contains the string used for moving in paths.
mxVmlCanvas2D.prototype.lineOp
Contains the string used for moving in paths.
mxVmlCanvas2D.prototype.curveOp
Contains the string used for bezier curves.
mxVmlCanvas2D.prototype.closeOp
Holds the operator for closing curves.
mxVmlCanvas2D.prototype.rotatedHtmlBackground
Background color for rotated HTML.
mxVmlCanvas2D.prototype.vmlScale
Specifies the scale used to draw VML shapes.
mxVmlCanvas2D.prototype.createElement = function(name)
Creates the given element using the document.
mxVmlCanvas2D.prototype.createVmlElement = function(name)
Creates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.
Prefix for VML namespace in node names.
mxVmlCanvas2D.prototype.addNode = function(filled,
stroked)
Adds the current node to the root.
mxVmlCanvas2D.prototype.createTransparentFill = function()
Creates a transparent fill.
mxVmlCanvas2D.prototype.createFill = function()
Creates a fill for the current state.
mxVmlCanvas2D.prototype.createStroke = function()
Creates a fill for the current state.
mxVmlCanvas2D.prototype.createShadow = function(node,
filled,
stroked)
Creates a shadow for the given node.
mxVmlCanvas2D.prototype.createShadowFill = function()
Creates the fill for the shadow.
mxVmlCanvas2D.prototype.createShadowStroke = function()
Creates the stroke for the shadow.
mxVmlCanvas2D.prototype.rotate = function(theta,
flipH,
flipV,
cx,
cy)
Sets the rotation of the canvas.
mxVmlCanvas2D.prototype.begin = function()
Extends superclass to create path.
mxVmlCanvas2D.prototype.quadTo = function(x1,
y1,
x2,
y2)
Replaces quadratic curve with bezier curve in VML.
mxVmlCanvas2D.prototype.createRect = function(nodeName,
x,
y,
w,
h)
Sets the glass gradient.
mxVmlCanvas2D.prototype.rect = function(x,
y,
w,
h)
Sets the current path to a rectangle.
mxVmlCanvas2D.prototype.roundrect = function(x,
y,
w,
h,
dx,
dy)
Sets the current path to a rounded rectangle.
mxVmlCanvas2D.prototype.ellipse = function(x,
y,
w,
h)
Sets the current path to an ellipse.
mxVmlCanvas2D.prototype.image = function(x,
y,
w,
h,
src,
aspect,
flipH,
flipV)
Paints an image.
mxVmlCanvas2D.prototype.text = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)
Paints the given text.
mxVmlCanvas2D.prototype.plainText = function(x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir)
Paints the outline of the current path.
mxVmlCanvas2D.prototype.stroke = function()
Paints the outline of the current path.
mxVmlCanvas2D.prototype.fill = function()
Fills the current path.
mxVmlCanvas2D.prototype.fillAndStroke = function()
Fills and paints the outline of the current path.
function mxGuide(graph,
states)
Constructs a new guide object.
mxGuide.prototype.graph
Reference to the enclosing mxGraph instance.
mxGuide.prototype.states
Contains the mxCellStates that are used for alignment.
mxGuide.prototype.horizontal
Specifies if horizontal guides are enabled.
mxGuide.prototype.vertical
Specifies if vertical guides are enabled.
mxGuide.prototype.rounded
Specifies if rounded coordinates should be used.
mxGuide.prototype.setStates = function(states)
Sets the mxCellStates that should be used for alignment.
mxGuide.prototype.isEnabledForEvent = function(evt)
Returns true if the guide should be enabled for the given native event.
mxGuide.prototype.getGuideTolerance = function()
Returns the tolerance for the guides.
mxGuide.prototype.createGuideShape = function(horizontal)
Returns the mxShape to be used for painting the respective guide.
mxGuide.prototype.move = function(bounds,
delta,
gridEnabled,
clone)
Moves the bounds by the given mxPoint and returnt the snapped point.
mxGuide.prototype.hide = function()
Hides all current guides.
mxGuide.prototype.setVisible = function(visible)
Shows or hides the current guides.
mxGuide.prototype.destroy = function()
Destroys all resources that this object uses.
function mxShape(stencil)
Constructs a new shape.
mxShape.prototype.dialect
Holds the dialect in which the shape is to be painted.
mxShape.prototype.scale
Holds the scale in which the shape is being painted.
mxShape.prototype.antiAlias
Rendering hint for configuring the canvas.
mxShape.prototype.minSvgStrokeWidth
Minimum stroke width for SVG output.
mxShape.prototype.bounds
Holds the mxRectangle that specifies the bounds of this shape.
mxShape.prototype.points
Holds the array of mxPoints that specify the points of this shape.
mxShape.prototype.node
Holds the outermost DOM node that represents this shape.
mxShape.prototype.state
Optional reference to the corresponding mxCellState.
mxShape.prototype.style
Optional reference to the style of the corresponding mxCellState.
mxShape.prototype.boundingBox
Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
mxShape.prototype.stencil
Holds the mxStencil that defines the shape.
Implements a generic shape which is based on a XML node as a description.
mxShape.prototype.svgStrokeTolerance
Event-tolerance for SVG strokes (in px).
mxShape.prototype.pointerEvents
Specifies if pointer events should be handled.
mxShape.prototype.svgPointerEvents
Specifies if pointer events should be handled.
mxShape.prototype.shapePointerEvents
Specifies if pointer events outside of shape should be handled.
mxShape.prototype.stencilPointerEvents
Specifies if pointer events outside of stencils should be handled.
mxShape.prototype.vmlScale
Scale for improving the precision of VML rendering.
mxShape.prototype.outline
Specifies if the shape should be drawn as an outline.
mxShape.prototype.visible
Specifies if the shape is visible.
mxShape.prototype.useSvgBoundingBox
Allows to use the SVG bounding box in SVG.
mxShape.prototype.init = function(container)
Initializes the shape by creaing the DOM node using create and adding it into the given container.
mxShape.prototype.create = function(container)
Creates and returns the DOM node(s) for the shape in the given container.
mxShape.prototype.initStyles = function(container)
Sets the styles to their default values.
mxShape.prototype.isParseVml = function()
Specifies if any VML should be added via insertAdjacentHtml to the DOM.
mxShape.prototype.isHtmlAllowed = function()
Returns true if HTML is allowed for this shape.
mxShape.prototype.getSvgScreenOffset = function()
Returns 0, or 0.5 if strokewidth % 2 == 1.
mxShape.prototype.createSvg = function()
Creates and returns the SVG node(s) to represent this shape.
mxShape.prototype.createVml = function()
Creates and returns the VML node to represent this shape.
mxShape.prototype.createHtml = function()
Creates and returns the HTML DOM node(s) to represent this shape.
mxShape.prototype.reconfigure = function()
Reconfigures this shape.
mxShape.prototype.redraw = function()
Creates and returns the SVG node(s) to represent this shape.
mxShape.prototype.clear = function()
Removes all child nodes and resets all CSS.
mxShape.prototype.updateBoundsFromPoints = function()
Updates the bounds based on the points.
mxShape.prototype.getLabelBounds = function(rect)
Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
mxShape.prototype.getLabelMargins= function(rect)
Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
mxShape.prototype.checkBounds = function()
Returns true if the bounds are not null and all of its variables are numeric.
mxShape.prototype.createVmlGroup = function()
Returns the temporary element used for rendering in IE8 standards mode.
mxShape.prototype.redrawShape = function()
Updates the SVG or VML shape.
mxShape.prototype.createCanvas = function()
Creates a new canvas for drawing this shape.
mxShape.prototype.createSvgCanvas = function()
Creates and returns an mxSvgCanvas2D for rendering this shape.
Extends mxAbstractCanvas2D to implement a canvas for SVG.
mxShape.prototype.createVmlCanvas = function()
Creates and returns an mxVmlCanvas2D for rendering this shape.
Implements a canvas to be used for rendering VML.
mxShape.prototype.updateVmlContainer = function()
Updates the bounds of the VML container.
mxShape.prototype.redrawHtmlShape = function()
Allow optimization by replacing VML with HTML.
mxShape.prototype.updateHtmlFilters = function(node)
Allow optimization by replacing VML with HTML.
mxShape.prototype.destroyCanvas = function(canvas)
Destroys the given canvas which was used for drawing.
mxShape.prototype.paint = function(c)
Generic rendering code.
mxShape.prototype.configureCanvas = function(c,
x,
y,
w,
h)
Sets the state of the canvas for drawing the shape.
mxShape.prototype.getGradientBounds = function(c,
x,
y,
w,
h)
Returns the bounding box for the gradient box for this shape.
mxShape.prototype.updateTransform = function(c,
x,
y,
w,
h)
Sets the scale and rotation on the given canvas.
mxShape.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Paints the vertex shape.
mxShape.prototype.paintBackground = function(c,
x,
y,
w,
h)
Hook for subclassers.
mxShape.prototype.paintForeground = function(c,
x,
y,
w,
h)
Hook for subclassers.
mxShape.prototype.paintEdgeShape = function(c,
pts)
Hook for subclassers.
mxShape.prototype.getArcSize = function(w,
h)
Returns the arc size for the given dimension.
mxShape.prototype.paintGlassEffect = function(c,
x,
y,
w,
h,
arc)
Paints the glass gradient effect.
mxShape.prototype.addPoints = function(c,
pts,
rounded,
arcSize,
close,
exclude,
initialMove)
Paints the given points with rounded corners.
mxShape.prototype.resetStyles = function()
Resets all styles.
mxShape.prototype.apply = function(state)
Applies the style of the given mxCellState to the shape.
mxShape.prototype.setCursor = function(cursor)
Sets the cursor on the given shape.
mxShape.prototype.getCursor = function()
Returns the current cursor.
mxShape.prototype.isRoundable = function()
Hook for subclassers.
mxShape.prototype.updateBoundingBox = function()
Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
mxShape.prototype.createBoundingBox = function()
Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
mxShape.prototype.augmentBoundingBox = function(bbox)
Augments the bounding box with the strokewidth and shadow offsets.
mxShape.prototype.isPaintBoundsInverted = function()
Returns true if the bounds should be inverted.
mxShape.prototype.getRotation = function()
Returns the rotation from the style.
mxShape.prototype.getTextRotation = function()
Returns the rotation for the text label.
mxShape.prototype.getShapeRotation = function()
Returns the actual rotation of the shape.
mxShape.prototype.createTransparentSvgRectangle = function(x,
y,
w,
h)
Adds a transparent rectangle that catches all events.
mxShape.prototype.setTransparentBackgroundImage = function(node)
Sets a transparent background CSS style to catch all events.
mxShape.prototype.releaseSvgGradients = function(grads)
Paints the line shape.
mxShape.prototype.destroy = function()
Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
function mxStencil(desc)
Constructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.
mxStencil.prototype.desc
Holds the XML node with the stencil description.
mxStencil.prototype.parseDescription = function()
Reads w0, h0, aspect, bgNodes and fgNodes from desc.
mxStencil.prototype.parseConstraints = function()
Reads the constraints from desc into constraints using parseConstraint.
mxStencil.defaultLocalized
Static global variable that specifies the default value for the localized attribute of the text element.
mxStencil.prototype.constraints
Holds an array of mxConnectionConstraints as defined in the shape.
Defines an object that contains the constraints about how to connect one side of an edge to its terminal.
mxStencil.prototype.aspect
Holds the aspect of the shape.
mxStencil.prototype.w0
Holds the width of the shape.
mxStencil.prototype.h0
Holds the height of the shape.
mxStencil.prototype.strokewidth
Holds the strokewidth direction from the description.
Holds the XML node with the stencil description.
Holds the XML node with the stencil description.
mxStencil.prototype.parseConstraint = function(node)
Parses the given XML node and returns its mxConnectionConstraint.
mxStencil.prototype.evaluateTextAttribute = function(node,
attribute,
shape)
Gets the given attribute as a text.
mxStencil.prototype.evaluateAttribute = function(node,
attribute,
shape)
Gets the attribute for the given name from the given node.
mxStencil.prototype.drawShape = function(canvas,
shape,
x,
y,
w,
h)
Draws this stencil inside the given bounds.
mxStencil.prototype.drawChildren = function(canvas,
shape,
x,
y,
w,
h,
node,
aspect,
disableShadow,
paint)
Draws this stencil inside the given bounds.
mxStencil.prototype.computeAspect = function(shape,
x,
y,
w,
h,
direction)
Returns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.
mxStencil.prototype.drawNode = function(canvas,
shape,
node,
aspect,
disableShadow,
paint)
Draws this stencil inside the given bounds.
addStencil: function(name,
stencil)
Adds the given mxStencil.
getStencil: function(name)
Returns the mxStencil for the given name.
addMarker: function(type,
funct)
Adds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.
createMarker: function(canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled)
Returns a function to paint the given marker.
function mxActor(bounds,
fill,
stroke,
strokewidth)
Constructs a new actor shape.
mxActor.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Redirects to redrawPath for subclasses to work.
mxActor.prototype.redrawPath = function(c,
x,
y,
w,
h)
Draws the path for this shape.
function mxCloud(bounds,
fill,
stroke,
strokewidth)
Constructs a new cloud shape.
mxCloud.prototype.redrawPath = function(c,
x,
y,
w,
h)
Draws the path for this shape.
function mxRectangleShape(bounds,
fill,
stroke,
strokewidth)
Constructs a new rectangle shape.
mxRectangleShape.prototype.isHtmlAllowed = function()
Returns true for non-rounded, non-rotated shapes with no glass gradient.
mxRectangleShape.prototype.paintBackground = function(c,
x,
y,
w,
h)
Generic background painting implementation.
mxRectangleShape.prototype.isRoundable = function(c,
x,
y,
w,
h)
Adds roundable support.
mxRectangleShape.prototype.paintForeground = function(c,
x,
y,
w,
h)
Generic background painting implementation.
function mxEllipse(bounds,
fill,
stroke,
strokewidth)
Constructs a new ellipse shape.
mxEllipse.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Paints the ellipse shape.
function mxDoubleEllipse(bounds,
fill,
stroke,
strokewidth)
Constructs a new ellipse shape.
mxDoubleEllipse.prototype.vmlScale
Scale for improving the precision of VML rendering.
mxDoubleEllipse.prototype.paintBackground = function(c,
x,
y,
w,
h)
Paints the background.
mxDoubleEllipse.prototype.paintForeground = function(c,
x,
y,
w,
h)
Paints the foreground.
mxDoubleEllipse.prototype.getLabelBounds = function(rect)
Returns the bounds for the label.
function mxRhombus(bounds,
fill,
stroke,
strokewidth)
Constructs a new rhombus shape.
mxRhombus.prototype.isRoundable = function()
Adds roundable support.
mxRhombus.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Generic painting implementation.
function mxPolyline(points,
stroke,
strokewidth)
Constructs a new polyline shape.
mxPolyline.prototype.getRotation = function()
Returns 0.
mxPolyline.prototype.getShapeRotation = function()
Returns 0.
mxPolyline.prototype.isPaintBoundsInverted = function()
Returns false.
mxPolyline.prototype.paintEdgeShape = function(c,
pts)
Paints the line shape.
mxPolyline.prototype.paintLine = function(c,
pts,
rounded)
Paints the line shape.
function mxArrow(points,
fill,
stroke,
strokewidth,
arrowWidth,
spacing,
endSize)
Constructs a new arrow shape.
mxArrow.prototype.augmentBoundingBox = function(bbox)
Augments the bounding box with the edge width and markers.
mxArrow.prototype.paintEdgeShape = function(c,
pts)
Paints the line shape.
function mxArrowConnector(points,
fill,
stroke,
strokewidth,
arrowWidth,
spacing,
endSize)
Constructs a new arrow shape.
mxArrowConnector.prototype.useSvgBoundingBox
Allows to use the SVG bounding box in SVG.
mxArrowConnector.prototype.resetStyles
Overrides mxShape to reset spacing.
mxArrowConnector.prototype.augmentBoundingBox = function(bbox)
Augments the bounding box with the edge width and markers.
mxArrowConnector.prototype.paintEdgeShape = function(c,
pts)
Paints the line shape.
mxArrowConnector.prototype.isArrowRounded = function()
Returns wether the arrow is rounded
mxArrowConnector.prototype.getStartArrowWidth = function()
Returns the width of the start arrow
mxArrowConnector.prototype.getEndArrowWidth = function()
Returns the width of the end arrow
mxArrowConnector.prototype.getEdgeWidth = function()
Returns the width of the body of the edge
mxArrowConnector.prototype.isOpenEnded = function()
Returns whether the ends of the shape are drawn
mxArrowConnector.prototype.isMarkerStart = function()
Returns whether the start marker is drawn
mxArrowConnector.prototype.isMarkerEnd = function()
Returns whether the end marker is drawn
function mxText(value,
bounds,
align,
valign,
color,
family,
size,
fontStyle,
spacing,
spacingTop,
spacingRight,
spacingBottom,
spacingLeft,
horizontal,
background,
border,
wrap,
clipped,
overflow,
labelPadding,
textDirection)
Constructs a new text shape.
mxText.prototype.baseSpacingTop
Specifies the spacing to be added to the top spacing.
mxText.prototype.baseSpacingBottom
Specifies the spacing to be added to the bottom spacing.
mxText.prototype.baseSpacingLeft
Specifies the spacing to be added to the left spacing.
mxText.prototype.baseSpacingRight
Specifies the spacing to be added to the right spacing.
mxText.prototype.replaceLinefeeds
Specifies if linefeeds in HTML labels should be replaced with BR tags.
mxText.prototype.verticalTextRotation
Rotation for vertical text.
mxText.prototype.ignoreClippedStringSize
Specifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle.
mxText.prototype.updateBoundingBox = function()
Updates the boundingBox for this shape using the given node and position.
mxText.prototype.ignoreStringSize
Specifies if the actual string size should be measured.
mxText.prototype.textWidthPadding
Specifies the padding to be added to the text width for the bounding box.
mxText.prototype.lastValue
Contains the last rendered text value.
mxText.prototype.cacheEnabled
Specifies if caching for HTML labels should be enabled.
mxText.prototype.isParseVml = function()
Text shapes do not contain VML markup and do not need to be parsed.
mxText.prototype.isHtmlAllowed = function()
Returns true if HTML is allowed for this shape.
mxText.prototype.getSvgScreenOffset = function()
Disables offset in IE9 for crisper image output.
mxText.prototype.checkBounds = function()
Returns true if the bounds are not null and all of its variables are numeric.
mxText.prototype.paint = function(c,
update)
Generic rendering code.
mxText.prototype.redraw = function()
Renders the text using the given DOM nodes.
mxText.prototype.resetStyles = function()
Resets all styles.
mxText.prototype.apply = function(state)
Extends mxShape to update the text styles.
mxText.prototype.getAutoDirection = function()
Used to determine the automatic text direction.
mxText.prototype.getShapeRotation = function()
Returns 0 to avoid using rotation in the canvas via updateTransform.
mxText.prototype.getTextRotation = function()
Returns the rotation for the text label of the corresponding shape.
mxText.prototype.isPaintBoundsInverted = function()
Inverts the bounds if mxShape.isBoundsInverted returns true or if the horizontal style is false.
mxText.prototype.configureCanvas = function(c,
x,
y,
w,
h)
Sets the state of the canvas for drawing the shape.
mxText.prototype.updateVmlContainer = function()
Sets the width and height of the container to 1px.
mxText.prototype.redrawHtmlShape = function()
Updates the HTML node(s) to reflect the latest bounds and scale.
mxText.prototype.updateHtmlTransform = function()
Returns the spacing as an mxPoint.
mxText.prototype.updateHtmlFilter = function()
Rotated text rendering quality is bad for IE9 quirks/IE8 standards
mxText.prototype.updateValue = function()
Updates the HTML node(s) to reflect the latest bounds and scale.
mxText.prototype.updateFont = function(node)
Updates the HTML node(s) to reflect the latest bounds and scale.
mxText.prototype.updateSize = function(node,
enableWrap)
Updates the HTML node(s) to reflect the latest bounds and scale.
mxText.prototype.getSpacing = function()
Returns the spacing as an mxPoint.
function mxTriangle()
Constructs a new triangle shape.
mxTriangle.prototype.isRoundable = function()
Adds roundable support.
mxTriangle.prototype.redrawPath = function(c,
x,
y,
w,
h)
Draws the path for this shape.
function mxHexagon()
Constructs a new hexagon shape.
mxHexagon.prototype.redrawPath = function(c,
x,
y,
w,
h)
Draws the path for this shape.
function mxLine(bounds,
stroke,
strokewidth)
Constructs a new line shape.
mxLine.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Redirects to redrawPath for subclasses to work.
function mxImageShape(bounds,
image,
fill,
stroke,
strokewidth)
Constructs a new image shape.
mxImageShape.prototype.preserveImageAspect
Switch to preserve image aspect.
mxImageShape.prototype.getSvgScreenOffset = function()
Disables offset in IE9 for crisper image output.
mxImageShape.prototype.apply = function(state)
Overrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.
Defines the key for the image background color.
Defines the key for the image border color.
mxImageShape.prototype.isHtmlAllowed = function()
Returns true if HTML is allowed for this shape.
mxImageShape.prototype.createHtml = function()
Creates and returns the HTML DOM node(s) to represent this shape.
mxImageShape.prototype.isRoundable = function(c,
x,
y,
w,
h)
Disables inherited roundable support.
mxImageShape.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Generic background painting implementation.
mxImageShape.prototype.redrawHtmlShape = function()
Overrides mxShape.redraw to preserve the aspect ratio of images.
function mxLabel(bounds,
fill,
stroke,
strokewidth)
Constructs a new label shape.
mxLabel.prototype.imageSize
Default width and height for the image.
mxLabel.prototype.spacing
Default value for image spacing.
mxLabel.prototype.indicatorSize
Default width and height for the indicicator.
mxLabel.prototype.indicatorSpacing
Default spacing between image and indicator.
mxLabel.prototype.init = function(container)
Initializes the shape and the indicator.
mxLabel.prototype.redraw = function()
Reconfigures this shape.
mxLabel.prototype.isHtmlAllowed = function()
Returns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.
mxLabel.prototype.paintForeground = function(c,
x,
y,
w,
h)
Generic background painting implementation.
mxLabel.prototype.paintImage = function(c,
x,
y,
w,
h)
Generic background painting implementation.
mxLabel.prototype.getImageBounds = function(x,
y,
w,
h)
Generic background painting implementation.
mxLabel.prototype.paintIndicator = function(c,
x,
y,
w,
h)
Generic background painting implementation.
mxLabel.prototype.getIndicatorBounds = function(x,
y,
w,
h)
Generic background painting implementation.
mxLabel.prototype.redrawHtmlShape = function()
Generic background painting implementation.
function mxCylinder(bounds,
fill,
stroke,
strokewidth)
Constructs a new cylinder shape.
mxCylinder.prototype.maxHeight
Defines the maximum height of the top and bottom part of the cylinder shape.
mxCylinder.prototype.svgStrokeTolerance
Sets stroke tolerance to 0 for SVG.
mxCylinder.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Redirects to redrawPath for subclasses to work.
mxCylinder.prototype.redrawPath = function(c,
x,
y,
w,
h,
isForeground)
Draws the path for this shape.
function mxConnector(points,
stroke,
strokewidth)
Constructs a new connector shape.
mxConnector.prototype.updateBoundingBox = function()
Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
mxConnector.prototype.augmentBoundingBox = function(bbox)
Augments the bounding box with the strokewidth and shadow offsets.
mxConnector.prototype.paintEdgeShape = function(c,
pts)
Paints the line shape.
mxConnector.prototype.createMarker = function(c,
pts,
source)
Prepares the marker by adding offsets in pts and returning a function to paint the marker.
function mxSwimlane(bounds,
fill,
stroke,
strokewidth)
Constructs a new swimlane shape.
mxSwimlane.prototype.imageSize
Default imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style.
mxSwimlane.prototype.isRoundable = function(c,
x,
y,
w,
h)
Adds roundable support.
mxSwimlane.prototype.getGradientBounds = function(c,
x,
y,
w,
h)
Returns the bounding box for the gradient box for this shape.
mxSwimlane.prototype.getArcSize = function(w,
h,
start)
Returns the arcsize for the swimlane.
mxSwimlane.prototype.paintVertexShape = function(c,
x,
y,
w,
h)
Paints the swimlane vertex shape.
mxSwimlane.prototype.paintSwimlane = function(c,
x,
y,
w,
h,
start,
fill,
swimlaneLine)
Paints the swimlane vertex shape.
mxSwimlane.prototype.paintRoundedSwimlane = function(c,
x,
y,
w,
h,
start,
r,
fill,
swimlaneLine)
Paints the swimlane vertex shape.
mxSwimlane.prototype.paintDivider = function(c,
x,
y,
w,
h,
start,
shadow)
Paints the divider between swimlane title and content area.
mxSwimlane.prototype.paintSeparator = function(c,
x,
y,
w,
h,
start,
color)
Paints the vertical or horizontal separator line between swimlanes.
mxSwimlane.prototype.getImageBounds = function(x,
y,
w,
h)
Paints the swimlane vertex shape.
function mxGraphLayout(graph)
Constructs a new layout using the given layouts.
mxGraphLayout.prototype.graph
Reference to the enclosing mxGraph.
mxGraphLayout.prototype.useBoundingBox
Boolean indicating if the bounding box of the label should be used if its available.
mxGraphLayout.prototype.parent
The parent cell of the layout, if any
mxGraphLayout.prototype.moveCell = function(cell,
x,
y)
Notified when a cell is being moved in a parent that has automatic layout to update the cell state (eg.
mxGraphLayout.prototype.execute = function(parent)
Executes the layout algorithm for the children of the given parent.
mxGraphLayout.prototype.getGraph = function()
Returns the graph that this layout operates on.
mxGraphLayout.prototype.getConstraint = function(key,
cell,
edge,
source)
Returns the constraint for the given key and cell.
mxGraphLayout.traverse = function(vertex,
directed,
func,
edge,
visited)
Traverses the (directed) graph invoking the given function for each visited vertex and edge.
mxGraphLayout.prototype.isAncestor = function(parent,
child,
traverseAncestors)
Returns true if the given parent is an ancestor of the given child.
mxGraphLayout.prototype.isVertexMovable = function(cell)
Returns a boolean indicating if the given mxCell is movable or bendable by the algorithm.
mxGraphLayout.prototype.isVertexIgnored = function(vertex)
Returns a boolean indicating if the given mxCell should be ignored by the algorithm.
mxGraphLayout.prototype.isEdgeIgnored = function(edge)
Returns a boolean indicating if the given mxCell should be ignored by the algorithm.
mxGraphLayout.prototype.setEdgeStyleEnabled = function(edge,
value)
Disables or enables the edge style of the given edge.
mxGraphLayout.prototype.setOrthogonalEdge = function(edge,
value)
Disables or enables orthogonal end segments of the given edge.
mxGraphLayout.prototype.getParentOffset = function(parent)
Determines the offset of the given parent to the parent of the layout
mxGraphLayout.prototype.setEdgePoints = function(edge,
points)
Replaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.
mxGraphLayout.prototype.setVertexLocation = function(cell,
x,
y)
Sets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true.
mxGraphLayout.prototype.getVertexBounds = function(cell)
Returns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.
mxGraphLayout.prototype.arrangeGroups = function(cells,
border,
topBorder,
rightBorder,
bottomBorder,
leftBorder)
Shortcut to mxGraph.updateGroupBounds with moveGroup set to true.
mxGraph.prototype.updateGroupBounds = function(cells,
border,
moveGroup,
topBorder,
rightBorder,
bottomBorder,
leftBorder)
Updates the bounds of the given groups to include all children and returns the passed-in cells.
function WeightedCellSorter(cell,
weightedValue)
Constructs a new weighted cell sorted for the given cell and weight.
WeightedCellSorter.prototype.weightedValue
The weighted value of the cell stored.
WeightedCellSorter.prototype.nudge
Whether or not to flip equal weight values.
WeightedCellSorter.prototype.visited
Whether or not this cell has been visited in the current assignment.
WeightedCellSorter.prototype.rankIndex
The index this cell is in the model rank.
WeightedCellSorter.prototype.cell
The cell whose median value is being calculated.
WeightedCellSorter.prototype.compare = function(a,
b)
Compares two WeightedCellSorters.
Base class for all layout algorithms in mxGraph.
function mxStackLayout(graph,
horizontal,
spacing,
x0,
y0,
border)
Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.
mxStackLayout.prototype.horizontal
Specifies the orientation of the layout.
mxStackLayout.prototype.spacing
Specifies the spacing between the cells.
mxStackLayout.prototype.x0
Specifies the horizontal origin of the layout.
mxStackLayout.prototype.y0
Specifies the vertical origin of the layout.
mxStackLayout.prototype.border
Border to be added if fill is true.
mxStackLayout.prototype.marginTop
Top margin for the child area.
mxStackLayout.prototype.marginLeft
Top margin for the child area.
mxStackLayout.prototype.marginRight
Top margin for the child area.
mxStackLayout.prototype.marginBottom
Top margin for the child area.
mxStackLayout.prototype.keepFirstLocation
Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.
mxStackLayout.prototype.fill
Boolean indicating if dimension should be changed to fill out the parent cell.
mxStackLayout.prototype.resizeParent
If the parent should be resized to match the width/height of the stack.
mxStackLayout.prototype.resizeParentMax
Use maximum of existing value and new value for resize of parent.
mxStackLayout.prototype.resizeLast
If the last element should be resized to fill out the parent.
mxStackLayout.prototype.wrap
Value at which a new column or row should be created.
mxStackLayout.prototype.borderCollapse
If the strokeWidth should be ignored.
mxStackLayout.prototype.allowGaps
If gaps should be allowed in the stack.
mxStackLayout.prototype.gridSize
Grid size for alignment of position and size.
mxStackLayout.prototype.isHorizontal = function()
Returns horizontal.
mxStackLayout.prototype.moveCell = function(cell,
x,
y)
Implements mxGraphLayout.moveCell.
mxStackLayout.prototype.getParentSize = function(parent)
Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.
mxStackLayout.prototype.getLayoutCells = function(parent)
Returns the cells to be layouted.
mxStackLayout.prototype.snap = function(value)
Snaps the given value to the grid size.
mxStackLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute.
function mxPartitionLayout(graph,
horizontal,
spacing,
border)
Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.
mxPartitionLayout.prototype.horizontal
Boolean indicating the direction in which the space is partitioned.
mxPartitionLayout.prototype.spacing
Integer that specifies the absolute spacing in pixels between the children.
mxPartitionLayout.prototype.border
Integer that specifies the absolute inset in pixels for the parent that contains the children.
mxPartitionLayout.prototype.resizeVertices
Boolean that specifies if vertices should be resized.
mxPartitionLayout.prototype.isHorizontal = function()
Returns horizontal.
mxPartitionLayout.prototype.moveCell = function(cell,
x,
y)
Implements mxGraphLayout.moveCell.
mxPartitionLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute.
function mxCompactTreeLayout(graph,
horizontal,
invert)
Constructs a new compact tree layout for the specified graph and orientation.
mxCompactTreeLayout.prototype.horizontal
Specifies the orientation of the layout.
mxCompactTreeLayout.prototype.invert
Specifies if edge directions should be inverted.
mxCompactTreeLayout.prototype.resizeParent
If the parents should be resized to match the width/height of the children.
mxCompactTreeLayout.prototype.maintainParentLocation
Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
mxCompactTreeLayout.prototype.groupPadding
Padding added to resized parents.
mxCompactTreeLayout.prototype.groupPaddingTop
Top padding added to resized parents.
mxCompactTreeLayout.prototype.groupPaddingRight
Right padding added to resized parents.
mxCompactTreeLayout.prototype.groupPaddingBottom
Bottom padding added to resized parents.
mxCompactTreeLayout.prototype.groupPaddingLeft
Left padding added to resized parents.
mxCompactTreeLayout.prototype.parentsChanged
A set of the parents that need updating based on children process as part of the layout.
mxCompactTreeLayout.prototype.moveTree
Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
mxCompactTreeLayout.prototype.visited
Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
mxCompactTreeLayout.prototype.levelDistance
Holds the levelDistance.
mxCompactTreeLayout.prototype.nodeDistance
Holds the nodeDistance.
mxCompactTreeLayout.prototype.resetEdges
Specifies if all edge points of traversed edges should be removed.
mxCompactTreeLayout.prototype.prefHozEdgeSep
The preferred horizontal distance between edges exiting a vertex.
mxCompactTreeLayout.prototype.prefVertEdgeOff
The preferred vertical offset between edges exiting a vertex.
mxCompactTreeLayout.prototype.minEdgeJetty
The minimum distance for an edge jetty from a vertex.
mxCompactTreeLayout.prototype.channelBuffer
The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.
mxCompactTreeLayout.prototype.edgeRouting
Whether or not to apply the internal tree edge routing.
mxCompactTreeLayout.prototype.sortEdges
Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.
mxCompactTreeLayout.prototype.alignRanks
Whether or not the tops of cells in each rank should be aligned across the rank
mxCompactTreeLayout.prototype.maxRankHeight
An array of the maximum height of cells (relative to the layout direction) per rank
mxCompactTreeLayout.prototype.root
The cell to use as the root of the tree
mxCompactTreeLayout.prototype.node
The internal node representation of the root cell.
mxCompactTreeLayout.prototype.isVertexIgnored = function(vertex)
Returns a boolean indicating if the given mxCell should be ignored as a vertex.
mxCompactTreeLayout.prototype.isHorizontal = function()
Returns horizontal.
mxCompactTreeLayout.prototype.execute = function(parent,
root)
Implements mxGraphLayout.execute.
mxCompactTreeLayout.prototype.moveNode = function(node,
dx,
dy)
Moves the specified node and all of its children by the given amount.
mxCompactTreeLayout.prototype.sortOutgoingEdges = function(source,
edges)
Called if sortEdges is true to sort the array of outgoing edges in place.
mxCompactTreeLayout.prototype.findRankHeights = function(node,
rank)
Stores the maximum height (relative to the layout direction) of cells in each rank
mxCompactTreeLayout.prototype.setCellHeights = function(node,
rank)
Set the cells heights (relative to the layout direction) when the tops of each rank are to be aligned
mxCompactTreeLayout.prototype.dfs = function(cell,
parent)
Does a depth first search starting at the specified cell.
mxCompactTreeLayout.prototype.layout = function(node)
Starts the actual compact tree layout algorithm at the given node.
mxCompactTreeLayout.prototype.horizontalLayout = function(node,
x0,
y0,
bounds)
mxCompactTreeLayout.prototype.verticalLayout = function(node,
parent,
x0,
y0,
bounds)
mxCompactTreeLayout.prototype.attachParent = function(node,
height)
mxCompactTreeLayout.prototype.layoutLeaf = function(node)
mxCompactTreeLayout.prototype.join = function(node)
mxCompactTreeLayout.prototype.merge = function(p1,
p2)
mxCompactTreeLayout.prototype.offset = function(p1,
p2,
a1,
a2,
b1,
b2)
mxCompactTreeLayout.prototype.bridge = function(line1,
x1,
y1,
line2,
x2,
y2)
mxCompactTreeLayout.prototype.createNode = function(cell)
mxCompactTreeLayout.prototype.apply = function(node,
bounds)
mxCompactTreeLayout.prototype.createLine = function(dx,
dy,
next)
mxCompactTreeLayout.prototype.adjustParents = function()
Adjust parent cells whose child geometries have changed.
mxCompactTreeLayout.prototype.localEdgeProcessing = function(node)
Moves the specified node and all of its children by the given amount.
function mxRadialTreeLayout(graph)
Constructs a new radial tree layout for the specified graph
mxRadialTreeLayout.prototype.angleOffset
The initial offset to compute the angle position.
mxRadialTreeLayout.prototype.rootx
The X co-ordinate of the root cell
mxRadialTreeLayout.prototype.rooty
The Y co-ordinate of the root cell
mxRadialTreeLayout.prototype.levelDistance
Holds the levelDistance.
mxRadialTreeLayout.prototype.nodeDistance
Holds the nodeDistance.
mxRadialTreeLayout.prototype.autoRadius
Specifies if the radios should be computed automatically
mxRadialTreeLayout.prototype.sortEdges
Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.
mxRadialTreeLayout.prototype.rowMinX
Array of leftmost x coordinate of each row
mxRadialTreeLayout.prototype.rowMaxX
Array of rightmost x coordinate of each row
mxRadialTreeLayout.prototype.rowMinCenX
Array of x coordinate of leftmost vertex of each row
mxRadialTreeLayout.prototype.rowMaxCenX
Array of x coordinate of rightmost vertex of each row
mxRadialTreeLayout.prototype.rowRadi
Array of y deltas of each row behind root vertex, also the radius in the tree
mxRadialTreeLayout.prototype.row
Array of vertices on each row
mxRadialTreeLayout.prototype.isVertexIgnored = function(vertex)
Returns a boolean indicating if the given mxCell should be ignored as a vertex.
mxRadialTreeLayout.prototype.execute = function(parent,
root)
Implements mxGraphLayout.execute.
mxRadialTreeLayout.prototype.calcRowDims = function(row,
rowNum)
Recursive function to calculate the dimensions of each row
mxFastOrganicLayout.prototype.useInputOrigin
Specifies if the top left corner of the input cells should be the origin of the layout result.
mxFastOrganicLayout.prototype.resetEdges
Specifies if all edge points of traversed edges should be removed.
mxFastOrganicLayout.prototype.disableEdgeStyle
Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
mxFastOrganicLayout.prototype.forceConstant
The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.
mxFastOrganicLayout.prototype.forceConstantSquared
Cache of <forceConstant>^2 for performance.
mxFastOrganicLayout.prototype.minDistanceLimit
Minimal distance limit.
mxFastOrganicLayout.prototype.minDistanceLimitSquared
Cached version of minDistanceLimit squared.
mxFastOrganicLayout.prototype.initialTemp
Start value of temperature.
mxFastOrganicLayout.prototype.temperature
Temperature to limit displacement at later stages of layout.
mxFastOrganicLayout.prototype.maxIterations
Total number of iterations to run the layout though.
mxFastOrganicLayout.prototype.iteration
Current iteration count.
mxFastOrganicLayout.prototype.vertexArray
An array of all vertices to be laid out.
mxFastOrganicLayout.prototype.dispX
An array of locally stored X co-ordinate displacements for the vertices.
mxFastOrganicLayout.prototype.dispY
An array of locally stored Y co-ordinate displacements for the vertices.
mxFastOrganicLayout.prototype.cellLocation
An array of locally stored co-ordinate positions for the vertices.
mxFastOrganicLayout.prototype.radius
The approximate radius of each cell, nodes only.
mxFastOrganicLayout.prototype.radiusSquared
The approximate radius squared of each cell, nodes only.
mxFastOrganicLayout.prototype.isMoveable
Array of booleans representing the movable states of the vertices.
mxFastOrganicLayout.prototype.neighbours
Local copy of cell neighbours.
mxFastOrganicLayout.prototype.indices
Hashtable from cells to local indices.
mxFastOrganicLayout.prototype.allowedToRun
Boolean flag that specifies if the layout is allowed to run.
mxFastOrganicLayout.prototype.isVertexIgnored = function(vertex)
Returns a boolean indicating if the given mxCell should be ignored as a vertex.
mxFastOrganicLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute.
mxFastOrganicLayout.prototype.calcPositions = function()
Takes the displacements calculated for each cell and applies them to the local cache of cell positions.
mxFastOrganicLayout.prototype.calcAttraction = function()
Calculates the attractive forces between all laid out nodes linked by edges
mxFastOrganicLayout.prototype.calcRepulsion = function()
Calculates the repulsive forces between all laid out nodes
mxFastOrganicLayout.prototype.reduceTemperature = function()
Reduces the temperature of the layout from an initial setting in a linear fashion to zero.
function mxCircleLayout(graph,
radius)
Constructs a new circular layout for the specified radius.
mxCircleLayout.prototype.radius
Integer specifying the size of the radius.
mxCircleLayout.prototype.moveCircle
Boolean specifying if the circle should be moved to the top, left corner specified by x0 and y0.
mxCircleLayout.prototype.x0
Integer specifying the left coordinate of the circle.
mxCircleLayout.prototype.y0
Integer specifying the top coordinate of the circle.
mxCircleLayout.prototype.resetEdges
Specifies if all edge points of traversed edges should be removed.
mxCircleLayout.prototype.disableEdgeStyle
Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
mxCircleLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute.
mxCircleLayout.prototype.getRadius = function(count,
max)
Returns the radius to be used for the given vertex count.
mxCircleLayout.prototype.circle = function(vertices,
r,
left,
top)
Executes the circular layout for the specified array of vertices and the given radius.
mxParallelEdgeLayout.prototype.spacing
Defines the spacing between the parallels.
mxParallelEdgeLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute.
mxParallelEdgeLayout.prototype.findParallels = function(parent)
Finds the parallel edges in the given parent.
mxParallelEdgeLayout.prototype.getEdgeId = function(edge)
Returns a unique ID for the given edge.
mxParallelEdgeLayout.prototype.layout = function(parallels)
Lays out the parallel edges in the given array.
mxParallelEdgeLayout.prototype.route = function(edge,
x,
y)
Routes the given edge via the given point.
function mxCompositeLayout(graph,
layouts,
master)
Constructs a new layout using the given layouts.
mxCompositeLayout.prototype.layouts
Holds the array of mxGraphLayouts that this layout contains.
mxCompositeLayout.prototype.moveCell = function(cell,
x,
y)
Implements mxGraphLayout.moveCell by calling move on master or the first layout in layouts.
mxCompositeLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute by executing all layouts in a single transaction.
function mxEdgeLabelLayout(graph,
radius)
Constructs a new edge label layout.
mxEdgeLabelLayout.prototype.execute = function(parent)
Implements mxGraphLayout.execute.
mxEdgeLabelLayout.prototype.placeLabels = function(v,
e)
Places the labels of the given edges.
mxEdgeLabelLayout.prototype.avoid = function(edge,
vertex)
Places the labels of the given edges.
function mxGraphAbstractHierarchyCell()
Constructs a new hierarchical layout algorithm.
mxGraphAbstractHierarchyCell.prototype.maxRank
The maximum rank this cell occupies.
mxGraphAbstractHierarchyCell.prototype.minRank
The minimum rank this cell occupies.
mxGraphAbstractHierarchyCell.prototype.x
The x position of this cell for each layer it occupies
mxGraphAbstractHierarchyCell.prototype.y
The y position of this cell for each layer it occupies
mxGraphAbstractHierarchyCell.prototype.width
The width of this cell
mxGraphAbstractHierarchyCell.prototype.height
The height of this cell
mxGraphAbstractHierarchyCell.prototype.nextLayerConnectedCells
A cached version of the cells this cell connects to on the next layer up
mxGraphAbstractHierarchyCell.prototype.previousLayerConnectedCells
A cached version of the cells this cell connects to on the next layer down
mxGraphAbstractHierarchyCell.prototype.temp
Temporary variable for general use.
mxGraphAbstractHierarchyCell.prototype.getNextLayerConnectedCells = function(
   layer
)
Returns the cells this cell connects to on the next layer up
mxGraphAbstractHierarchyCell.prototype.getPreviousLayerConnectedCells = function(
   layer
)
Returns the cells this cell connects to on the next layer down
mxGraphAbstractHierarchyCell.prototype.isEdge = function()
Returns whether or not this cell is an edge
mxGraphAbstractHierarchyCell.prototype.isVertex = function()
Returns whether or not this cell is a node
mxGraphAbstractHierarchyCell.prototype.getGeneralPurposeVariable = function(
   layer
)
Gets the value of temp for the specified layer
mxGraphAbstractHierarchyCell.prototype.setGeneralPurposeVariable = function(
   layer,
   value
)
Set the value of temp for the specified layer
mxGraphAbstractHierarchyCell.prototype.setX = function(layer,
value)
Set the value of x for the specified layer
mxGraphAbstractHierarchyCell.prototype.getX = function(layer)
Gets the value of x on the specified layer
mxGraphAbstractHierarchyCell.prototype.setY = function(layer,
value)
Set the value of y for the specified layer
function mxGraphHierarchyNode(cell)
Constructs an internal node to represent the specified real graph cell
mxGraphHierarchyNode.prototype.cell
The graph cell this object represents.
mxGraphHierarchyNode.prototype.id
The object identity of the wrapped cell
mxGraphHierarchyNode.prototype.connectsAsTarget
Collection of hierarchy edges that have this node as a target
mxGraphHierarchyNode.prototype.connectsAsSource
Collection of hierarchy edges that have this node as a source
mxGraphHierarchyNode.prototype.hashCode
Assigns a unique hashcode for each node.
mxGraphHierarchyNode.prototype.getRankValue = function(layer)
Returns the integer value of the layer that this node resides in
mxGraphHierarchyNode.prototype.getNextLayerConnectedCells = function(layer)
Returns the cells this cell connects to on the next layer up
mxGraphHierarchyNode.prototype.getPreviousLayerConnectedCells = function(layer)
Returns the cells this cell connects to on the next layer down
mxGraphHierarchyNode.prototype.isVertex = function()
Returns true.
mxGraphHierarchyNode.prototype.getGeneralPurposeVariable = function(layer)
Gets the value of temp for the specified layer
mxGraphHierarchyNode.prototype.setGeneralPurposeVariable = function(layer,
value)
Set the value of temp for the specified layer
mxGraphHierarchyNode.prototype.isAncestor = function(otherNode)
mxGraphHierarchyNode.prototype.getCoreCell = function()
Gets the core vertex associated with this wrapper
function mxGraphHierarchyEdge(edges)
Constructs a hierarchy edge
mxGraphHierarchyEdge.prototype.edges
The graph edge(s) this object represents.
mxGraphHierarchyEdge.prototype.ids
The object identities of the wrapped cells
mxGraphHierarchyEdge.prototype.source
The node this edge is sourced at
mxGraphHierarchyEdge.prototype.target
The node this edge targets
mxGraphHierarchyEdge.prototype.isReversed
Whether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout
mxGraphHierarchyEdge.prototype.invert = function(layer)
Inverts the direction of this internal edge(s)
mxGraphHierarchyEdge.prototype.getNextLayerConnectedCells = function(layer)
Returns the cells this cell connects to on the next layer up
mxGraphHierarchyEdge.prototype.getPreviousLayerConnectedCells = function(layer)
Returns the cells this cell connects to on the next layer down
mxGraphHierarchyEdge.prototype.isEdge = function()
Returns true.
mxGraphHierarchyEdge.prototype.getGeneralPurposeVariable = function(layer)
Gets the value of temp for the specified layer
mxGraphHierarchyEdge.prototype.setGeneralPurposeVariable = function(layer,
value)
Set the value of temp for the specified layer
mxGraphHierarchyEdge.prototype.getCoreCell = function()
Gets the first core edge associated with this wrapper
function mxGraphHierarchyModel(layout,
vertices,
roots,
parent,
tightenToSource)
Creates an internal ordered graph model using the vertices passed in.
mxGraphHierarchyModel.prototype.maxRank
Stores the largest rank number allocated
mxGraphHierarchyModel.prototype.vertexMapper
Map from graph vertices to internal model nodes.
mxGraphHierarchyModel.prototype.edgeMapper
Map from graph edges to internal model edges
mxGraphHierarchyModel.prototype.ranks
Mapping from rank number to actual rank
mxGraphHierarchyModel.prototype.roots
Store of roots of this hierarchy model, these are real graph cells, not internal cells
mxGraphHierarchyModel.prototype.parent
The parent cell whose children are being laid out
mxGraphHierarchyModel.prototype.dfsCount
Count of the number of times the ancestor dfs has been used.
mxGraphHierarchyModel.prototype.SOURCESCANSTARTRANK
High value to start source layering scan rank value from.
mxGraphHierarchyModel.prototype.tightenToSource
Whether or not to tighten the assigned ranks of vertices up towards the source cells.
mxGraphHierarchyModel.prototype.createInternalCells = function(layout,
vertices,
internalVertices)
Creates all edges in the internal model
mxGraphHierarchyModel.prototype.initialRank = function()
Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
mxGraphHierarchyModel.prototype.fixRanks = function()
Fixes the layer assignments to the values stored in the nodes.
mxGraphHierarchyModel.prototype.visit = function(visitor,
dfsRoots,
trackAncestors,
seenNodes)
A depth first search through the internal heirarchy model.
mxGraphHierarchyModel.prototype.dfs = function(parent,
root,
connectingEdge,
visitor,
seen,
layer)
Performs a depth first search on the internal hierarchy model
mxGraphHierarchyModel.prototype.extendedDfs = function(parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer)
Performs a depth first search on the internal hierarchy model.
function mxSwimlaneModel(layout,
vertices,
roots,
parent,
tightenToSource)
Creates an internal ordered graph model using the vertices passed in.
mxSwimlaneModel.prototype.maxRank
Stores the largest rank number allocated
mxSwimlaneModel.prototype.vertexMapper
Map from graph vertices to internal model nodes.
mxSwimlaneModel.prototype.edgeMapper
Map from graph edges to internal model edges
mxSwimlaneModel.prototype.ranks
Mapping from rank number to actual rank
mxSwimlaneModel.prototype.roots
Store of roots of this hierarchy model, these are real graph cells, not internal cells
mxSwimlaneModel.prototype.parent
The parent cell whose children are being laid out
mxSwimlaneModel.prototype.dfsCount
Count of the number of times the ancestor dfs has been used.
mxSwimlaneModel.prototype.SOURCESCANSTARTRANK
High value to start source layering scan rank value from.
mxSwimlaneModel.prototype.tightenToSource
Whether or not to tighten the assigned ranks of vertices up towards the source cells.
mxSwimlaneModel.prototype.ranksPerGroup
An array of the number of ranks within each swimlane
mxSwimlaneModel.prototype.createInternalCells = function(layout,
vertices,
internalVertices)
Creates all edges in the internal model
mxSwimlaneModel.prototype.initialRank = function()
Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
mxSwimlaneModel.prototype.maxChainDfs = function(parent,
root,
connectingEdge,
seen,
chainCount)
Performs a depth first search on the internal hierarchy model.
mxSwimlaneModel.prototype.fixRanks = function()
Fixes the layer assignments to the values stored in the nodes.
mxSwimlaneModel.prototype.visit = function(visitor,
dfsRoots,
trackAncestors,
seenNodes)
A depth first search through the internal heirarchy model.
mxSwimlaneModel.prototype.dfs = function(parent,
root,
connectingEdge,
visitor,
seen,
layer)
Performs a depth first search on the internal hierarchy model
mxSwimlaneModel.prototype.extendedDfs = function(parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer)
Performs a depth first search on the internal hierarchy model.
function mxHierarchicalLayoutStage()
Constructs a new hierarchical layout stage.
mxHierarchicalLayoutStage.prototype.execute = function(parent)
Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
function mxMedianHybridCrossingReduction(layout)
Creates a coordinate assignment.
mxMedianHybridCrossingReduction.prototype.layout
Reference to the enclosing mxHierarchicalLayout.
A hierarchical layout algorithm.
mxMedianHybridCrossingReduction.prototype.maxIterations
The maximum number of iterations to perform whilst reducing edge crossings.
mxMedianHybridCrossingReduction.prototype.nestedBestRanks
Stores each rank as a collection of cells in the best order found for each layer so far
mxMedianHybridCrossingReduction.prototype.currentBestCrossings
The total number of crossings found in the best configuration so far
mxMedianHybridCrossingReduction.prototype.iterationsWithoutImprovement
The total number of crossings found in the best configuration so far
mxMedianHybridCrossingReduction.prototype.maxNoImprovementIterations
The total number of crossings found in the best configuration so far
mxMedianHybridCrossingReduction.prototype.execute = function(parent)
Performs a vertex ordering within ranks as described by Gansner et al 1993
mxMedianHybridCrossingReduction.prototype.calculateCrossings = function(model)
Calculates the total number of edge crossing in the current graph.
mxMedianHybridCrossingReduction.prototype.calculateRankCrossing = function(
   i,
   model
)
Calculates the number of edges crossings between the specified rank and the rank below it.
mxMedianHybridCrossingReduction.prototype.transpose = function(
   mainLoopIteration,
   model
)
Takes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing
mxMedianHybridCrossingReduction.prototype.weightedMedian = function(iteration,
model)
Sweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks
mxMedianHybridCrossingReduction.prototype.medianRank = function(rankValue,
downwardSweep)
Attempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks
mxMedianHybridCrossingReduction.prototype.medianValue = function(
   connectedCells,
   rankValue
)
Calculates the median rank order positioning for the specified cell using the connected cells on the specified rank.
function MedianCellSorter()
Constructs a new median cell sorter.
MedianCellSorter.prototype.medianValue
The weighted value of the cell stored.
MedianCellSorter.prototype.cell
The cell whose median value is being calculated
MedianCellSorter.prototype.compare = function(a,
b)
Compares two MedianCellSorters.
function mxMinimumCycleRemover(layout)
Creates a cycle remover for the given internal model.
mxMinimumCycleRemover.prototype.layout
Reference to the enclosing mxHierarchicalLayout.
mxMinimumCycleRemover.prototype.execute = function(parent)
Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
function mxCoordinateAssignment(layout,
intraCellSpacing,
interRankCellSpacing,
orientation,
initialX,
parallelEdgeSpacing)
Creates a coordinate assignment.
mxCoordinateAssignment.prototype.layout
Reference to the enclosing mxHierarchicalLayout.
mxCoordinateAssignment.prototype.intraCellSpacing
The minimum buffer between cells on the same rank.
mxCoordinateAssignment.prototype.interRankCellSpacing
The minimum distance between cells on adjacent ranks.
mxCoordinateAssignment.prototype.parallelEdgeSpacing
The distance between each parallel edge on each ranks for long edges.
mxCoordinateAssignment.prototype.maxIterations
The number of heuristic iterations to run.
mxCoordinateAssignment.prototype.prefHozEdgeSep
The preferred horizontal distance between edges exiting a vertex
mxCoordinateAssignment.prototype.prefVertEdgeOff
The preferred vertical offset between edges exiting a vertex
mxCoordinateAssignment.prototype.minEdgeJetty
The minimum distance for an edge jetty from a vertex
mxCoordinateAssignment.prototype.channelBuffer
The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed
mxCoordinateAssignment.prototype.jettyPositions
Map of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices.
mxCoordinateAssignment.prototype.orientation
The position of the root ( start ) node(s) relative to the rest of the laid out graph.
mxCoordinateAssignment.prototype.initialX
The minimum x position node placement starts at
mxCoordinateAssignment.prototype.limitX
The maximum x value this positioning lays up to
mxCoordinateAssignment.prototype.currentXDelta
The sum of x-displacements for the current iteration
mxCoordinateAssignment.prototype.widestRank
The rank that has the widest x position
mxCoordinateAssignment.prototype.rankTopY
Internal cache of top-most values of Y for each rank
mxCoordinateAssignment.prototype.rankBottomY
Internal cache of bottom-most value of Y for each rank
mxCoordinateAssignment.prototype.widestRankValue
The X-coordinate of the edge of the widest rank
mxCoordinateAssignment.prototype.rankWidths
The width of all the ranks
mxCoordinateAssignment.prototype.rankY
The Y-coordinate of all the ranks
mxCoordinateAssignment.prototype.fineTuning
Whether or not to perform local optimisations and iterate multiple times through the algorithm.
mxCoordinateAssignment.prototype.nextLayerConnectedCache
A store of connections to the layer above for speed
mxCoordinateAssignment.prototype.previousLayerConnectedCache
A store of connections to the layer below for speed
mxCoordinateAssignment.prototype.groupPadding
Padding added to resized parents
mxCoordinateAssignment.prototype.execute = function(parent)
A basic horizontal coordinate assignment algorithm
mxCoordinateAssignment.prototype.minNode = function(model)
Performs one median positioning sweep in both directions
mxCoordinateAssignment.prototype.medianPos = function(i,
model)
Performs one median positioning sweep in one direction
mxCoordinateAssignment.prototype.rankMedianPosition = function(rankValue,
model,
nextRankValue)
Performs median minimisation over one rank.
mxCoordinateAssignment.prototype.calculatedWeightedValue = function(
   currentCell,
   collection
)
Calculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer
mxCoordinateAssignment.prototype.medianXValue = function(connectedCells,
rankValue)
Calculates the median position of the connected cell on the specified rank
mxCoordinateAssignment.prototype.initialCoords = function(facade,
model)
Sets up the layout in an initial positioning.
mxCoordinateAssignment.prototype.rankCoordinates = function(rankValue,
graph,
model)
Sets up the layout in an initial positioning.
mxCoordinateAssignment.prototype.calculateWidestRank = function(graph,
model)
Calculates the width rank in the hierarchy.
mxCoordinateAssignment.prototype.minPath = function(graph,
model)
Straightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.
mxCoordinateAssignment.prototype.repositionValid = function(model,
cell,
rank,
position)
Determines whether or not a node may be moved to the specified x position on the specified rank
mxCoordinateAssignment.prototype.setCellLocations = function(graph,
model)
Sets the cell locations in the facade to those stored after this layout processing step has completed.
mxCoordinateAssignment.prototype.localEdgeProcessing = function(model)
Separates the x position of edges as they connect to vertices
mxCoordinateAssignment.prototype.setEdgePosition = function(cell)
Fixes the control points
mxCoordinateAssignment.prototype.setVertexLocation = function(cell)
Fixes the position of the specified vertex.
mxCoordinateAssignment.prototype.processReversedEdge = function(graph,
model)
Hook to add additional processing
function mxSwimlaneOrdering(layout)
Creates a cycle remover for the given internal model.
mxSwimlaneOrdering.prototype.layout
Reference to the enclosing mxHierarchicalLayout.
mxSwimlaneOrdering.prototype.execute = function(parent)
Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
function mxHierarchicalLayout(graph,
orientation,
deterministic)
Constructs a new hierarchical layout algorithm.
mxHierarchicalLayout.prototype.roots
Holds the array of mxCell that this layout contains.
mxHierarchicalLayout.prototype.resizeParent
Specifies if the parent should be resized after the layout so that it contains all the child cells.
mxHierarchicalLayout.prototype.maintainParentLocation
Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
mxHierarchicalLayout.prototype.moveParent
Specifies if the parent should be moved if resizeParent is enabled.
mxHierarchicalLayout.prototype.parentBorder
The border to be added around the children if the parent is to be resized using resizeParent.
mxHierarchicalLayout.prototype.intraCellSpacing
The spacing buffer added between cells on the same layer.
mxHierarchicalLayout.prototype.interRankCellSpacing
The spacing buffer added between cell on adjacent layers.
mxHierarchicalLayout.prototype.interHierarchySpacing
The spacing buffer between unconnected hierarchies.
mxHierarchicalLayout.prototype.parallelEdgeSpacing
The distance between each parallel edge on each ranks for long edges
mxHierarchicalLayout.prototype.orientation
The position of the root node(s) relative to the laid out graph in.
mxHierarchicalLayout.prototype.fineTuning
Whether or not to perform local optimisations and iterate multiple times through the algorithm.
mxHierarchicalLayout.prototype.tightenToSource
Whether or not to tighten the assigned ranks of vertices up towards the source cells.
mxHierarchicalLayout.prototype.disableEdgeStyle
Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
mxHierarchicalLayout.prototype.traverseAncestors
Whether or not to drill into child cells and layout in reverse group order.
mxHierarchicalLayout.prototype.model
The internal mxGraphHierarchyModel formed of the layout.
Internal model of a hierarchical graph.
mxHierarchicalLayout.prototype.edgeStyle
The style to apply between cell layers to edge segments
mxHierarchicalLayout.prototype.getModel = function()
Returns the internal mxGraphHierarchyModel for this layout algorithm.
mxHierarchicalLayout.prototype.execute = function(parent,
roots)
Executes the layout for the children of the specified parent.
mxHierarchicalLayout.prototype.findRoots = function(parent,
vertices)
Returns all visible children in the given parent which do not have incoming edges.
mxHierarchicalLayout.prototype.getEdges = function(cell)
Returns the connected edges for the given cell.
mxHierarchicalLayout.prototype.getVisibleTerminal = function(edge,
source)
Helper function to return visible terminal for edge allowing for ports
mxHierarchicalLayout.prototype.run = function(parent)
The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
mxHierarchicalLayout.prototype.filterDescendants = function(cell,
result)
Creates an array of descendant cells
mxHierarchicalLayout.prototype.isPort = function(cell)
Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
mxHierarchicalLayout.prototype.getEdgesBetween = function(source,
target,
directed)
Returns the edges between the given source and target.
mxHierarchicalLayout.prototype.cycleStage = function(parent)
Executes the cycle stage using mxMinimumCycleRemover.
mxHierarchicalLayout.prototype.layeringStage = function()
Implements first stage of a Sugiyama layout.
mxHierarchicalLayout.prototype.crossingStage = function(parent)
Executes the crossing stage using mxMedianHybridCrossingReduction.
mxHierarchicalLayout.prototype.placementStage = function(initialX,
parent)
Executes the placement stage using mxCoordinateAssignment.
function mxSwimlaneLayout(graph,
orientation,
deterministic)
Constructs a new hierarchical layout algorithm.
mxSwimlaneLayout.prototype.roots
Holds the array of mxCell that this layout contains.
mxSwimlaneLayout.prototype.swimlanes
Holds the array of mxCell of the ordered swimlanes to lay out
mxSwimlaneLayout.prototype.dummyVertices
Holds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes
mxSwimlaneLayout.prototype.dummyVertexWidth
The cell width of any dummy vertices inserted
mxSwimlaneLayout.prototype.resizeParent
Specifies if the parent should be resized after the layout so that it contains all the child cells.
mxSwimlaneLayout.prototype.maintainParentLocation
Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
mxSwimlaneLayout.prototype.moveParent
Specifies if the parent should be moved if resizeParent is enabled.
mxSwimlaneLayout.prototype.parentBorder
The border to be added around the children if the parent is to be resized using resizeParent.
mxSwimlaneLayout.prototype.intraCellSpacing
The spacing buffer added between cells on the same layer.
mxSwimlaneLayout.prototype.interRankCellSpacing
The spacing buffer added between cell on adjacent layers.
mxSwimlaneLayout.prototype.interHierarchySpacing
The spacing buffer between unconnected hierarchies.
mxSwimlaneLayout.prototype.parallelEdgeSpacing
The distance between each parallel edge on each ranks for long edges
mxSwimlaneLayout.prototype.orientation
The position of the root node(s) relative to the laid out graph in.
mxSwimlaneLayout.prototype.fineTuning
Whether or not to perform local optimisations and iterate multiple times through the algorithm.
mxSwimlaneLayout.prototype.tightenToSource
Whether or not to tighten the assigned ranks of vertices up towards the source cells.
mxSwimlaneLayout.prototype.disableEdgeStyle
Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
mxSwimlaneLayout.prototype.traverseAncestors
Whether or not to drill into child cells and layout in reverse group order.
mxSwimlaneLayout.prototype.model
The internal mxSwimlaneModel formed of the layout.
Internal model of a hierarchical graph.
mxHierarchicalLayout.prototype.edgeStyle
The style to apply between cell layers to edge segments
mxSwimlaneLayout.prototype.getModel = function()
Returns the internal mxSwimlaneModel for this layout algorithm.
mxSwimlaneLayout.prototype.execute = function(parent,
swimlanes)
Executes the layout for the children of the specified parent.
mxSwimlaneLayout.prototype.updateGroupBounds = function()
Updates the bounds of the given array of groups so that it includes all child vertices.
mxSwimlaneLayout.prototype.findRoots = function(parent,
vertices)
Returns all visible children in the given parent which do not have incoming edges.
mxSwimlaneLayout.prototype.getEdges = function(cell)
Returns the connected edges for the given cell.
mxSwimlaneLayout.prototype.getVisibleTerminal = function(edge,
source)
Helper function to return visible terminal for edge allowing for ports
mxSwimlaneLayout.prototype.run = function(parent)
The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
mxSwimlaneLayout.prototype.filterDescendants = function(cell,
result)
Creates an array of descendant cells
mxSwimlaneLayout.prototype.isPort = function(cell)
Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
mxSwimlaneLayout.prototype.getEdgesBetween = function(source,
target,
directed)
Returns the edges between the given source and target.
mxSwimlaneLayout.prototype.cycleStage = function(parent)
Executes the cycle stage using mxMinimumCycleRemover.
mxSwimlaneLayout.prototype.layeringStage = function()
Implements first stage of a Sugiyama layout.
mxSwimlaneLayout.prototype.crossingStage = function(parent)
Executes the crossing stage using mxMedianHybridCrossingReduction.
mxSwimlaneLayout.prototype.placementStage = function(initialX,
parent)
Executes the placement stage using mxCoordinateAssignment.
Base class for objects that dispatch named events.
Fires when an undoable edit is dispatched.
mxGraphModel.prototype.updateLevel
Counter for the depth of nested transactions.
mxGraphModel.prototype.beginUpdate = function()
Increments the updateLevel by one.
mxGraphModel.prototype.endUpdate = function()
Decrements the updateLevel by one and fires an undo event if the updateLevel reaches 0.
function mxGraphModel(root)
Constructs a new graph model.
mxGraphModel.prototype.root
Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
mxGraphModel.prototype.cells
Maps from Ids to cells.
mxGraphModel.prototype.maintainEdgeParent
Specifies if edges should automatically be moved into the nearest common ancestor of their terminals.
mxGraphModel.prototype.ignoreRelativeEdgeParent
Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.
mxGraphModel.prototype.createIds
Specifies if the model should automatically create Ids for new cells.
mxGraphModel.prototype.prefix
Defines the prefix of new Ids.
mxGraphModel.prototype.postfix
Defines the postfix of new Ids.
mxGraphModel.prototype.nextId
Specifies the next Id to be created.
mxGraphModel.prototype.currentEdit
Holds the changes for the current transaction.
mxGraphModel.prototype.endingUpdate
True if the program flow is currently inside endUpdate.
mxGraphModel.prototype.clear = function()
Sets a new root using createRoot.
mxGraphModel.prototype.createRoot = function()
Creates a new root cell with a default layer (child 0).
mxGraphModel.prototype.isCreateIds = function()
Returns createIds.
mxGraphModel.prototype.setCreateIds = function(value)
Sets createIds.
mxGraphModel.prototype.getCell = function(id)
Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
mxGraphModel.prototype.filterCells = function(cells,
filter)
Returns the cells from the given array where the given filter function returns true.
mxGraphModel.prototype.getDescendants = function(parent)
Returns all descendants of the given cell and the cell itself in an array.
mxGraphModel.prototype.filterDescendants = function(filter,
parent)
Visits all cells recursively and applies the specified filter function to each cell.
mxGraphModel.prototype.getRoot = function(cell)
Returns the root of the model or the topmost parent of the given cell.
mxGraphModel.prototype.setRoot = function(root)
Sets the root of the model using mxRootChange and adds the change to the current transaction.
Action to change the root in a model.
mxGraphModel.prototype.rootChanged = function(root)
Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId.
mxGraphModel.prototype.isRoot = function(cell)
Returns true if the given cell is the root of the model and a non-null value.
mxGraphModel.prototype.isLayer = function(cell)
Returns true if isRoot returns true for the parent of the given cell.
mxGraphModel.prototype.isAncestor = function(parent,
child)
Returns true if the given parent is an ancestor of the given child.
mxGraphModel.prototype.contains = function(cell)
Returns true if the model contains the given mxCell.
mxGraphModel.prototype.getParent = function(cell)
Returns the parent of the given cell.
mxGraphModel.prototype.add = function(parent,
child,
index)
Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.
Action to add or remove a child in a model.
mxGraphModel.prototype.cellAdded = function(cell)
Inner callback to update cells when a cell has been added.
mxGraphModel.prototype.createId = function(cell)
Hook method to create an Id for the specified cell.
mxGraphModel.prototype.updateEdgeParents = function(cell,
root)
Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
mxGraphModel.prototype.updateEdgeParent = function(edge,
root)
Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.
mxGraphModel.prototype.getOrigin = function(cell)
Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.
mxGraphModel.prototype.getNearestCommonAncestor = function(cell1,
cell2)
Returns the nearest common ancestor for the specified cells.
mxGraphModel.prototype.remove = function(cell)
Removes the specified cell from the model using mxChildChange and adds the change to the current transaction.
mxGraphModel.prototype.cellRemoved = function(cell)
Inner callback to update cells when a cell has been removed.
mxGraphModel.prototype.parentForCellChanged = function(cell,
parent,
index)
Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.
mxCell.prototype.insert = function(child,
index)
Inserts the specified child into the child array at the specified index and updates the parent reference of the child.
mxGraphModel.prototype.getChildCount = function(cell)
Returns the number of children in the given cell.
mxGraphModel.prototype.getChildAt = function(cell,
index)
Returns the child of the given mxCell at the given index.
mxGraphModel.prototype.getChildren = function(cell)
Returns all children of the given mxCell as an array of mxCells.
mxGraphModel.prototype.getChildVertices = function(parent)
Returns the child vertices of the given parent.
mxGraphModel.prototype.getChildEdges = function(parent)
Returns the child edges of the given parent.
mxGraphModel.prototype.getChildCells = function(parent,
vertices,
edges)
Returns the children of the given cell that are vertices and/or edges depending on the arguments.
mxGraphModel.prototype.getTerminal = function(edge,
isSource)
Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.
mxGraphModel.prototype.setTerminal = function(edge,
terminal,
isSource)
Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.
Action to change a terminal in a model.
mxGraphModel.prototype.setTerminals = function(edge,
source,
target)
Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.
mxGraphModel.prototype.terminalForCellChanged = function(edge,
terminal,
isSource)
Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.
mxCell.prototype.insertEdge = function(edge,
isOutgoing)
Inserts the specified edge into the edge array and returns the edge.
mxGraphModel.prototype.getEdgeCount = function(cell)
Returns the number of distinct edges connected to the given cell.
mxGraphModel.prototype.getEdgeAt = function(cell,
index)
Returns the edge of cell at the given index.
mxGraphModel.prototype.getDirectedEdgeCount = function(cell,
outgoing,
ignoredEdge)
Returns the number of incoming or outgoing edges, ignoring the given edge.
mxGraphModel.prototype.getConnections = function(cell)
Returns all edges of the given cell without loops.
mxGraphModel.prototype.getIncomingEdges = function(cell)
Returns the incoming edges of the given cell without loops.
mxGraphModel.prototype.getOutgoingEdges = function(cell)
Returns the outgoing edges of the given cell without loops.
mxGraphModel.prototype.getEdges = function(cell,
incoming,
outgoing,
includeLoops)
Returns all distinct edges connected to this cell as a new array of mxCells.
mxGraphModel.prototype.getEdgesBetween = function(source,
target,
directed)
Returns all edges between the given source and target pair.
mxGraphModel.prototype.getOpposites = function(edges,
terminal,
sources,
targets)
Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.
mxGraphModel.prototype.getTopmostCells = function(cells)
Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.
mxGraphModel.prototype.isVertex = function(cell)
Returns true if the given cell is a vertex.
mxGraphModel.prototype.isEdge = function(cell)
Returns true if the given cell is an edge.
mxGraphModel.prototype.isConnectable = function(cell)
Returns true if the given mxCell is connectable.
mxGraphModel.prototype.getValue = function(cell)
Returns the user object of the given mxCell using mxCell.getValue.
mxCell.prototype.getValue = function()
Returns the user object of the cell.
mxGraphModel.prototype.setValue = function(cell,
value)
Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
Action to change a user object in a model.
mxGraphModel.prototype.valueForCellChanged = function(cell,
value)
Inner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.
mxCell.prototype.valueChanged = function(newValue)
Changes the user object after an in-place edit and returns the previous value.
mxGraphModel.prototype.getGeometry = function(cell)
Returns the mxGeometry of the given mxCell.
Extends mxRectangle to represent the geometry of a cell.
mxGraphModel.prototype.setGeometry = function(cell,
geometry)
Sets the mxGeometry of the given mxCell.
mxGraphModel.prototype.geometryForCellChanged = function(cell,
geometry)
Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.
mxCell.prototype.setGeometry = function(geometry)
Sets the mxGeometry to be used as the geometry.
mxGraphModel.prototype.getStyle = function(cell)
Returns the style of the given mxCell.
mxGraphModel.prototype.setStyle = function(cell,
style)
Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
Action to change a cell’s style in a model.
mxGraphModel.prototype.styleForCellChanged = function(cell,
style)
Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.
mxCell.prototype.setStyle = function(style)
Sets the string to be used as the style.
mxGraphModel.prototype.isCollapsed = function(cell)
Returns true if the given mxCell is collapsed.
mxGraphModel.prototype.setCollapsed = function(cell,
collapsed)
Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
Action to change a cell’s collapsed state in a model.
mxGraphModel.prototype.collapsedStateForCellChanged = function(cell,
collapsed)
Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.
mxCell.prototype.setCollapsed = function(collapsed)
Sets the collapsed state.
mxGraphModel.prototype.isVisible = function(cell)
Returns true if the given mxCell is visible.
mxGraphModel.prototype.setVisible = function(cell,
visible)
Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
Action to change a cell’s visible state in a model.
mxGraphModel.prototype.visibleStateForCellChanged = function(cell,
visible)
Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.
mxGraphModel.prototype.execute = function(change)
Executes the given edit and fires events if required.
mxGraphModel.prototype.createUndoableEdit = function(significant)
Creates a new mxUndoableEdit that implements the notify function to fire a change and notify event through the mxUndoableEdit’s source.
Implements a composite undoable edit.
mxGraphModel.prototype.mergeChildren = function(from,
to,
cloneAllEdges)
Merges the children of the given cell into the given target cell inside this model.
mxGraphModel.prototype.getParents = function(cells)
Returns an array that represents the set (no duplicates) of all parents for the given array of cells.
mxGraphModel.prototype.cloneCell = function(cell)
Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.
mxGraphModel.prototype.cloneCells = function(cells,
includeChildren,
mapping)
Returns an array of clones for the given array of mxCells.
mxGraphModel.prototype.cloneCellImpl = function(cell,
mapping,
includeChildren)
Inner helper method for cloning cells recursively.
mxGraphModel.prototype.cellCloned = function(cell)
Hook for cloning the cell.
mxGraphModel.prototype.restoreClone = function(clone,
cell,
mapping)
Inner helper method for restoring the connections in a network of cloned cells.
function mxRootChange(model,
root)
Constructs a change of the root in the specified model.
mxRootChange.prototype.execute = function()
Carries out a change of the root using mxGraphModel.rootChanged.
function mxChildChange(model,
parent,
child,
index)
Constructs a change of a child in the specified model.
mxChildChange.prototype.execute = function()
Changes the parent of child using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
function mxTerminalChange(model,
cell,
terminal,
source)
Constructs a change of a terminal in the specified model.
mxTerminalChange.prototype.execute = function()
Changes the terminal of cell to previous using mxGraphModel.terminalForCellChanged.
function mxValueChange(model,
cell,
value)
Constructs a change of a user object in the specified model.
mxValueChange.prototype.execute = function()
Changes the value of cell to previous using mxGraphModel.valueForCellChanged.
function mxStyleChange(model,
cell,
style)
Constructs a change of a style in the specified model.
mxStyleChange.prototype.execute = function()
Changes the style of cell to previous using mxGraphModel.styleForCellChanged.
function mxGeometryChange(model,
cell,
geometry)
Constructs a change of a geometry in the specified model.
mxGeometryChange.prototype.execute = function()
Changes the geometry of cell ro previous using mxGraphModel.geometryForCellChanged.
function mxCollapseChange(model,
cell,
collapsed)
Constructs a change of a collapsed state in the specified model.
mxCollapseChange.prototype.execute = function()
Changes the collapsed state of cell to previous using mxGraphModel.collapsedStateForCellChanged.
function mxVisibleChange(model,
cell,
visible)
Constructs a change of a visible state in the specified model.
mxVisibleChange.prototype.execute = function()
Changes the visible state of cell to previous using mxGraphModel.visibleStateForCellChanged.
function mxCellAttributeChange(cell,
attribute,
value)
Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.
mxCellAttributeChange.prototype.execute = function()
Changes the attribute of the cell’s user object by using mxCell.setAttribute.
mxCell.prototype.setAttribute = function(name,
value)
Sets the specified attribute on the user object if it is an XML node.
function mxCell(value,
geometry,
style)
Constructs a new cell to be used in a graph model.
mxCell.prototype.id
Holds the Id.
mxCell.prototype.value
Holds the user object.
mxCell.prototype.geometry
Holds the mxGeometry.
mxCell.prototype.style
Holds the style as a string of the form [(stylename|key=value);].
mxCell.prototype.vertex
Specifies whether the cell is a vertex.
mxCell.prototype.edge
Specifies whether the cell is an edge.
mxCell.prototype.connectable
Specifies whether the cell is connectable.
mxCell.prototype.visible
Specifies whether the cell is visible.
mxCell.prototype.collapsed
Specifies whether the cell is collapsed.
mxCell.prototype.parent
Reference to the parent cell.
mxCell.prototype.source
Reference to the source terminal.
mxCell.prototype.target
Reference to the target terminal.
mxCell.prototype.children
Holds the child cells.
mxCell.prototype.edges
Holds the edges.
mxCell.prototype.mxTransient
List of members that should not be cloned inside clone.
mxCell.prototype.clone = function()
Returns a clone of the cell.
mxCell.prototype.getId = function()
Returns the Id of the cell as a string.
mxCell.prototype.setId = function(id)
Sets the Id of the cell to the given string.
mxCell.prototype.setValue = function(value)
Sets the user object of the cell.
mxCell.prototype.getGeometry = function()
Returns the mxGeometry that describes the geometry.
mxCell.prototype.getStyle = function()
Returns a string that describes the style.
mxCell.prototype.isVertex = function()
Returns true if the cell is a vertex.
mxCell.prototype.setVertex = function(vertex)
Specifies if the cell is a vertex.
mxCell.prototype.isEdge = function()
Returns true if the cell is an edge.
mxCell.prototype.setEdge = function(edge)
Specifies if the cell is an edge.
mxCell.prototype.isConnectable = function()
Returns true if the cell is connectable.
mxCell.prototype.setConnectable = function(connectable)
Sets the connectable state.
mxCell.prototype.isVisible = function()
Returns true if the cell is visibile.
mxCell.prototype.setVisible = function(visible)
Specifies if the cell is visible.
mxCell.prototype.isCollapsed = function()
Returns true if the cell is collapsed.
mxCell.prototype.getParent = function()
Returns the cell’s parent.
mxCell.prototype.setParent = function(parent)
Sets the parent cell.
mxCell.prototype.getTerminal = function(source)
Returns the source or target terminal.
mxCell.prototype.setTerminal = function(terminal,
isSource)
Sets the source or target terminal and returns the new terminal.
mxCell.prototype.getChildCount = function()
Returns the number of child cells.
mxCell.prototype.getIndex = function(child)
Returns the index of the specified child in the child array.
mxCell.prototype.getChildAt = function(index)
Returns the child at the specified index.
mxCell.prototype.remove = function(index)
Removes the child at the specified index from the child array and returns the child that was removed.
mxCell.prototype.removeFromParent = function()
Removes the cell from its parent.
mxCell.prototype.getEdgeCount = function()
Returns the number of edges in the edge array.
mxCell.prototype.getEdgeIndex = function(edge)
Returns the index of the specified edge in edges.
mxCell.prototype.getEdgeAt = function(index)
Returns the edge at the specified index in edges.
mxCell.prototype.removeEdge = function(edge,
isOutgoing)
Removes the specified edge from the edge array and returns the edge.
mxCell.prototype.removeFromTerminal = function(isSource)
Removes the edge from its source or target terminal.
mxCell.prototype.hasAttribute = function(name)
Returns true if the user object is an XML node that contains the given attribute.
mxCell.prototype.getAttribute = function(name,
defaultValue)
Returns the specified attribute from the user object if it is an XML node.
mxCell.prototype.cloneValue = function()
Returns a clone of the cell’s user object.
function mxGeometry(x,
y,
width,
height)
Constructs a new object to describe the size and location of a vertex or the control points of an edge.
mxGeometry.prototype.TRANSLATE_CONTROL_POINTS
Global switch to translate the points in translate.
mxGeometry.prototype.alternateBounds
Stores alternate values for x, y, width and height in a rectangle.
mxGeometry.prototype.sourcePoint
Defines the source mxPoint of the edge.
mxGeometry.prototype.targetPoint
Defines the target mxPoint of the edge.
mxGeometry.prototype.points
Array of mxPoints which specifies the control points along the edge.
mxGeometry.prototype.offset
For edges, this holds the offset (in pixels) from the position defined by x and y on the edge.
mxGeometry.prototype.relative
Specifies if the coordinates in the geometry are to be interpreted as relative coordinates.
mxGeometry.prototype.swap = function()
Swaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle.
mxGeometry.prototype.getTerminalPoint = function(isSource)
Returns the mxPoint representing the source or target point of this edge.
mxGeometry.prototype.setTerminalPoint = function(point,
isSource)
Sets the sourcePoint or targetPoint to the given mxPoint and returns the new point.
mxGeometry.prototype.rotate = function(angle,
cx)
Rotates the geometry by the given angle around the given center.
mxGeometry.prototype.translate = function(dx,
dy)
Translates the geometry by the specified amount.
mxGeometry.prototype.scale = function(sx,
sy,
fixedAspect)
Scales the geometry by the given amount.
mxGeometry.prototype.equals = function(obj)
Returns true if the given object equals this geometry.
create: function(cell)
Creates the cell path for the given cell.
getParentPath: function(path)
Returns the path for the parent of the cell represented by the given path.
resolve: function(root,
path)
Returns the cell for the specified cell path using the given root as the root of the path.
compare: function(p1,
p2)
Compares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.
Defines the key for the perimeter style.
RectanglePerimeter: function (bounds,
vertex,
next,
orthogonal)
Describes a rectangular perimeter for the given bounds.
EllipsePerimeter: function (bounds,
vertex,
next,
orthogonal)
Describes an elliptic perimeter.
RhombusPerimeter: function (bounds,
vertex,
next,
orthogonal)
Describes a rhombus (aka diamond) perimeter.
TrianglePerimeter: function (bounds,
vertex,
next,
orthogonal)
Describes a triangle perimeter.
HexagonPerimeter: function (bounds,
vertex,
next,
orthogonal)
Describes a hexagon perimeter.
function mxPrintPreview(graph,
scale,
pageFormat,
border,
x0,
y0,
borderColor,
title,
pageSelector)
Constructs a new print preview for the given parameters.
mxPrintPreview.prototype.graph
Reference to the mxGraph that should be previewed.
mxPrintPreview.prototype.pageFormat
Holds the mxRectangle that defines the page format.
mxPrintPreview.prototype.scale
Holds the scale of the print preview.
mxPrintPreview.prototype.border
The border inset around each side of every page in the preview.
mxPrintPreview.prototype.marginTop
The margin at the top of the page (number).
mxPrintPreview.prototype.marginBottom
The margin at the bottom of the page (number).
mxPrintPreview.prototype.x0
Holds the horizontal offset of the output.
mxPrintPreview.prototype.y0
Holds the vertical offset of the output.
mxPrintPreview.prototype.autoOrigin
Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
mxPrintPreview.prototype.printOverlays
Specifies if overlays should be printed.
mxPrintPreview.prototype.printControls
Specifies if controls (such as folding icons) should be printed.
mxPrintPreview.prototype.printBackgroundImage
Specifies if the background image should be printed.
mxPrintPreview.prototype.backgroundColor
Holds the color value for the page background color.
mxPrintPreview.prototype.borderColor
Holds the color value for the page border.
mxPrintPreview.prototype.title
Holds the title of the preview window.
mxPrintPreview.prototype.pageSelector
Boolean that specifies if the page selector should be displayed.
mxPrintPreview.prototype.wnd
Reference to the preview window.
mxPrintPreview.prototype.targetWindow
Assign any window here to redirect the rendering in open.
mxPrintPreview.prototype.open = function(css,
targetWindow,
forcePageBreaks,
keepOpen)
Shows the print preview window.
mxPrintPreview.prototype.pageCount
Holds the actual number of pages in the preview.
mxPrintPreview.prototype.clipping
Specifies is clipping should be used to avoid creating too many cell states in large diagrams.
mxPrintPreview.prototype.getWindow = function()
Returns wnd.
mxPrintPreview.prototype.appendGraph = function(graph,
scale,
x0,
y0,
forcePageBreaks,
keepOpen)
Adds the given graph to the existing print preview.
mxPrintPreview.prototype.addPageBreak = function(doc)
Adds a page break to the given document.
mxPrintPreview.prototype.closeDocument = function()
Writes the closing tags for body and page after calling writePostfix.
mxPrintPreview.prototype.writePostfix = function(doc)
Called before closing the body of the page.
mxPrintPreview.prototype.writeHead = function(doc,
css)
Writes the HEAD section into the given document, without the opening and closing HEAD tags.
mxPrintPreview.prototype.createPageSelector = function(vpages,
hpages)
Creates the page selector table.
mxPrintPreview.prototype.renderPage = function(w,
h,
dx,
dy,
content,
pageNumber)
Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
mxPrintPreview.prototype.getRoot = function()
Returns the root cell for painting the graph.
mxPrintPreview.prototype.addGraphFragment = function(dx,
dy,
scale,
pageNumber,
div,
clip)
Adds a graph fragment to the given div.
mxPrintPreview.prototype.getLinkForCellState = function(state)
Returns the link for the given cell state.
mxPrintPreview.prototype.insertBackgroundImage = function(div,
dx,
dy)
Inserts the background image into the given div.
mxPrintPreview.prototype.getCoverPages = function()
Returns the pages to be added before the print output.
mxPrintPreview.prototype.getAppendices = function()
Returns the pages to be added after the print output.
mxPrintPreview.prototype.print = function(css)
Opens the print preview and shows the print dialog.
mxPrintPreview.prototype.close = function()
Closes the print preview window.
function mxStylesheet()
Constructs a new stylesheet and assigns default styles.
mxStylesheet.prototype.createDefaultVertexStyle = function()
Creates and returns the default vertex style.
mxStylesheet.prototype.createDefaultEdgeStyle = function()
Creates and returns the default edge style.
mxStylesheet.prototype.putDefaultVertexStyle = function(style)
Sets the default style for vertices using defaultVertex as the stylename.
mxStylesheet.prototype.putDefaultEdgeStyle = function(style)
Sets the default style for edges using defaultEdge as the stylename.
mxStylesheet.prototype.getDefaultVertexStyle = function()
Returns the default style for vertices.
mxStylesheet.prototype.getDefaultEdgeStyle = function()
Sets the default style for edges.
mxStylesheet.prototype.putCellStyle = function(name,
style)
Stores the given map of key, value pairs under the given name in styles.
Maps from names to cell styles.
mxStylesheet.prototype.getCellStyle = function(name,
defaultStyle)
Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.
Extends mxEventSource to implement a view for a graph.
function mxCellState(view,
cell,
style)
Constructs a new object that represents the current state of the given cell in the specified view.
mxCellState.prototype.view
Reference to the enclosing mxGraphView.
mxCellState.prototype.cell
Reference to the mxCell that is represented by this state.
mxCellState.prototype.style
Contains an array of key, value pairs that represent the style of the cell.
mxCellState.prototype.invalidStyle
Specifies if the style is invalid.
mxCellState.prototype.invalid
Specifies if the state is invalid.
mxCellState.prototype.origin
mxPoint that holds the origin for all child cells.
mxCellState.prototype.absolutePoints
Holds an array of mxPoints that represent the absolute points of an edge.
mxCellState.prototype.absoluteOffset
mxPoint that holds the absolute offset.
mxCellState.prototype.visibleSourceState
Caches the visible source terminal state.
mxCellState.prototype.visibleTargetState
Caches the visible target terminal state.
mxCellState.prototype.terminalDistance
Caches the distance between the end points for an edge.
mxCellState.prototype.length
Caches the length of an edge.
mxCellState.prototype.segments
Array of numbers that represent the cached length of each segment of the edge.
mxCellState.prototype.shape
Holds the mxShape that represents the cell graphically.
mxCellState.prototype.text
Holds the mxText that represents the label of the cell.
Extends mxShape to implement a text shape.
mxCellState.prototype.unscaledWidth
Holds the unscaled width of the state.
mxCellState.prototype.getPerimeterBounds = function(border,
bounds)
Returns the mxRectangle that should be used as the perimeter of the cell.
mxCellState.prototype.setAbsoluteTerminalPoint = function(point,
isSource)
Sets the first or last point in absolutePoints depending on isSource.
mxCellState.prototype.setCursor = function(cursor)
Sets the given cursor on the shape and text shape.
mxCellState.prototype.getVisibleTerminal = function(source)
Returns the visible source or target terminal cell.
mxCellState.prototype.getVisibleTerminalState = function(source)
Returns the visible source or target terminal state.
mxCellState.prototype.setVisibleTerminalState = function(terminalState,
source)
Sets the visible source or target terminal state.
mxCellState.prototype.getCellBounds = function()
Returns the unscaled, untranslated bounds.
mxCellState.prototype.getPaintBounds = function()
Returns the unscaled, untranslated paint bounds.
mxCellState.prototype.updateCachedBounds = function()
Updates the cellBounds and paintBounds.
mxCellState.prototype.setState = function(state)
Copies all fields from the given state to this state.
mxCellState.prototype.clone = function()
Returns a clone of this mxPoint.
mxCellState.prototype.destroy = function()
Destroys the state and all associated resources.
mxGraphSelectionModel.prototype.changeSelection = function(added,
removed)
Inner callback to add the specified mxCell to the selection.
Action to change the current root in a view.
function mxGraphSelectionModel(graph)
Constructs a new graph selection model for the given mxGraph.
mxGraphSelectionModel.prototype.doneResource
Specifies the resource key for the status message after a long operation.
mxGraphSelectionModel.prototype.updatingSelectionResource
Specifies the resource key for the status message while the selection is being updated.
mxGraphSelectionModel.prototype.graph
Reference to the enclosing mxGraph.
mxGraphSelectionModel.prototype.singleSelection
Specifies if only one selected item at a time is allowed.
mxGraphSelectionModel.prototype.isSingleSelection = function()
Returns singleSelection as a boolean.
mxGraphSelectionModel.prototype.setSingleSelection = function(singleSelection)
Sets the singleSelection flag.
mxGraphSelectionModel.prototype.isSelected = function(cell)
Returns true if the given mxCell is selected.
mxGraphSelectionModel.prototype.isEmpty = function()
Returns true if no cells are currently selected.
mxGraphSelectionModel.prototype.clear = function()
Clears the selection and fires a change event if the selection was not empty.
mxGraphSelectionModel.prototype.setCell = function(cell)
Selects the specified mxCell using setCells.
mxGraphSelectionModel.prototype.setCells = function(cells)
Selects the given array of mxCells and fires a change event.
mxGraphSelectionModel.prototype.getFirstSelectableCell = function(cells)
Returns the first selectable cell in the given array of cells.
mxGraphSelectionModel.prototype.addCell = function(cell)
Adds the given mxCell to the selection and fires a select event.
mxGraphSelectionModel.prototype.addCells = function(cells)
Adds the given array of mxCells to the selection and fires a select event.
mxGraphSelectionModel.prototype.removeCell = function(cell)
Removes the specified mxCell from the selection and fires a select event for the remaining cells.
mxGraphSelectionModel.prototype.removeCells = function(cells)
mxGraphSelectionModel.prototype.cellAdded = function(cell)
Inner callback to add the specified mxCell to the selection.
mxGraphSelectionModel.prototype.cellRemoved = function(cell)
Inner callback to remove the specified mxCell from the selection.
mxSelectionChange.prototype.execute = function()
Changes the current root of the view.
function mxCellEditor(graph)
Constructs a new in-place editor for the specified graph.
mxCellEditor.prototype.graph
Reference to the enclosing mxGraph.
mxCellEditor.prototype.textarea
Holds the DIV that is used for text editing.
mxCellEditor.prototype.editingCell
Reference to the mxCell that is currently being edited.
mxCellEditor.prototype.trigger
Reference to the event that was used to start editing.
mxCellEditor.prototype.modified
Specifies if the label has been modified.
mxCellEditor.prototype.autoSize
Specifies if the textarea should be resized while the text is being edited.
mxCellEditor.prototype.selectText
Specifies if the text should be selected when editing starts.
mxCellEditor.prototype.emptyLabelText
Text to be displayed for empty labels.
mxCellEditor.prototype.escapeCancelsEditing
If true, pressing the escape key will stop editing and not accept the new value.
mxCellEditor.prototype.textNode
Reference to the label DOM node that has been hidden.
mxCellEditor.prototype.zIndex
Specifies the zIndex for the textarea.
mxCellEditor.prototype.minResize
Defines the minimum width and height to be used in resize.
mxCellEditor.prototype.resize = function()
Returns modified.
mxCellEditor.prototype.wordWrapPadding
Correction factor for word wrapping width.
mxCellEditor.prototype.blurEnabled
If focusLost should be called if textarea loses the focus.
mxCellEditor.prototype.focusLost = function()
Called if the textarea has lost focus.
mxCellEditor.prototype.initialValue
Holds the initial editing value to check if the current value was modified.
mxCellEditor.prototype.align
Holds the current temporary horizontal alignment for the cell style.
mxCellEditor.prototype.init = function ()
Creates the textarea and installs the event listeners.
mxCellEditor.prototype.applyValue = function(state,
value)
Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.
mxCellEditor.prototype.stopEditing = function(cancel)
Stops the editor and applies the value if cancel is false.
mxGraph.prototype.labelChanged = function(cell,
value,
evt)
Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
mxCellEditor.prototype.setAlign = function (align)
Sets the temporary horizontal alignment for the current editing session.
mxCellEditor.prototype.getInitialValue = function(state,
trigger)
Gets the initial editing value for the given cell.
mxCellEditor.prototype.getCurrentValue = function(state)
Returns the current editing value.
mxCellEditor.prototype.isCancelEditingKeyEvent = function(evt)
Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
mxCellEditor.prototype.installListeners = function(elt)
Installs listeners for focus, change and standard key event handling.
mxCellEditor.prototype.isStopEditingEvent = function(evt)
Returns true if the given keydown event should stop cell editing.
mxCellEditor.prototype.isEventSource = function(evt)
Returns true if this editor is the source for the given native event.
mxCellEditor.prototype.getBackgroundColor = function(state)
Returns the background color for the in-place editor.
mxCellEditor.prototype.isLegacyEditor = function()
Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.
mxCellEditor.prototype.startEditing = function(cell,
trigger)
Starts the editor for the given cell.
mxCellEditor.prototype.isSelectText = function()
Returns selectText.
mxCellEditor.prototype.prepareTextarea = function()
Prepares the textarea for getting its value in stopEditing.
mxCellEditor.prototype.isHideLabel = function(state)
Returns true if the label should be hidden while the cell is being edited.
mxCellEditor.prototype.getMinimumSize = function(state)
Returns the minimum width and height for editing the given state.
mxCellEditor.prototype.getEditorBounds = function(state)
Returns the mxRectangle that defines the bounds of the editor.
mxCellEditor.prototype.getEmptyLabelText = function (cell)
Returns the initial label value to be used of the label of the given cell is empty.
mxCellEditor.prototype.getEditingCell = function ()
Returns the cell that is currently being edited or null if no cell is being edited.
mxCellEditor.prototype.destroy = function ()
Destroys the editor and removes all associated resources.
function mxCellRenderer()
arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
mxCellRenderer.defaultShapes
Static array that contains the globally registered shapes which are known to all instances of this class.
mxCellRenderer.prototype.defaultEdgeShape
Defines the default shape for edges.
mxCellRenderer.prototype.defaultVertexShape
Defines the default shape for vertices.
mxCellRenderer.prototype.defaultTextShape
Defines the default shape for labels.
mxCellRenderer.prototype.legacyControlPosition
Specifies if the folding icon should ignore the horizontal orientation of a swimlane.
mxCellRenderer.prototype.legacySpacing
Specifies if spacing and label position should be ignored if overflow is fill or width.
mxCellRenderer.prototype.antiAlias
Anti-aliasing option for new shapes.
mxCellRenderer.prototype.minSvgStrokeWidth
Minimum stroke width for SVG output.
mxCellRenderer.prototype.forceControlClickHandler
Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
mxCellRenderer.registerShape = function(key,
shape)
Registers the given constructor under the specified key in this instance of the renderer.
mxCellRenderer.prototype.initializeShape = function(state)
Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
mxCellRenderer.prototype.configureShape = function(state)
Configures the shape for the given cell state.
mxCellRenderer.prototype.createShape = function(state)
Creates and returns the shape for the given cell state.
mxCellRenderer.prototype.createIndicatorShape = function(state)
Creates the indicator shape for the given cell state.
mxCellRenderer.prototype.getShape = function(name)
Returns the shape for the given name from defaultShapes.
mxCellRenderer.prototype.getShapeConstructor = function(state)
Returns the constructor to be used for creating the shape.
mxCellRenderer.prototype.postConfigureShape = function(state)
Replaces any reserved words used for attributes, eg.
mxCellRenderer.prototype.checkPlaceholderStyles = function(state)
Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
mxCellRenderer.prototype.resolveColor = function(state,
field,
key)
Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
mxCellRenderer.prototype.getLabelValue = function(state)
Returns the value to be used for the label.
mxCellRenderer.prototype.createLabel = function(state,
value)
Creates the label for the given cell state.
mxCellRenderer.prototype.initializeLabel = function(state,
shape)
Initiailzes the label with a suitable container.
mxCellRenderer.prototype.createCellOverlays = function(state)
Creates the actual shape for showing the overlay for the given cell state.
mxCellRenderer.prototype.initializeOverlay = function(state,
overlay)
Initializes the given overlay.
Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.
mxCellRenderer.prototype.createControl = function(state)
Creates the control for the given cell state.
mxCellRenderer.prototype.createControlClickHandler = function(state)
Hook for creating the click handler for the folding icon.
mxCellRenderer.prototype.initControl = function(state,
control,
handleEvents,
clickHandler)
Initializes the given control and returns the corresponding DOM node.
mxCellRenderer.prototype.isShapeEvent = function(state,
evt)
Returns true if the event is for the shape of the given state.
mxCellRenderer.prototype.isLabelEvent = function(state,
evt)
Returns true if the event is for the label of the given state.
mxCellRenderer.prototype.installListeners = function(state)
Installs the event listeners for the given cell state.
mxCellRenderer.prototype.redrawLabel = function(state,
forced)
Redraws the label for the given cell state.
mxCellRenderer.prototype.isTextShapeInvalid = function(state,
shape)
Returns true if the style for the text shape has changed.
mxCellRenderer.prototype.redrawLabelShape = function(shape)
Called to invoked redraw on the given text shape.
mxCellRenderer.prototype.getTextScale = function(state)
Returns the scaling used for the label of the given state
mxCellRenderer.prototype.getLabelBounds = function(state)
Returns the bounds to be used to draw the label of the given state.
mxCellRenderer.prototype.rotateLabelBounds = function(state,
bounds)
Adds the shape rotation to the given label bounds and applies the alignment and offsets.
mxCellRenderer.prototype.redrawCellOverlays = function(state,
forced)
Redraws the overlays for the given cell state.
mxCellRenderer.prototype.redrawControl = function(state,
forced)
Redraws the control for the given cell state.
mxCellRenderer.prototype.getControlBounds = function(state,
w,
h)
Returns the bounds to be used to draw the control (folding icon) of the given state.
mxCellRenderer.prototype.insertStateAfter = function(state,
node,
htmlNode)
Inserts the given array of mxShapes after the given nodes in the DOM.
mxCellRenderer.prototype.getShapesForState = function(state)
Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.
mxCellRenderer.prototype.redraw = function(state,
force,
rendering)
Updates the bounds or points and scale of the shapes for the given cell state.
mxCellRenderer.prototype.redrawShape = function(state,
force,
rendering)
Redraws the shape for the given cell state.
mxCellRenderer.prototype.doRedrawShape = function(state)
Invokes redraw on the shape of the given state.
mxCellRenderer.prototype.isShapeInvalid = function(state,
shape)
Returns true if the given shape must be repainted.
mxCellRenderer.prototype.destroy = function(state)
Destroys the shapes associated with the given cell state.
Defines the key for the edge style.
EntityRelation: function (state,
source,
target,
points,
result)
Implements an entity relation style for edges (as used in database schema diagrams).
Loop: function (state,
source,
target,
points,
result)
Implements a self-reference, aka.
ElbowConnector: function (state,
source,
target,
points,
result)
Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSide: function (state,
source,
target,
points,
result)
Implements a vertical elbow edge.
TopToBottom: function(state,
source,
target,
points,
result)
Implements a horizontal elbow edge.
SegmentConnector: function(state,
source,
target,
hints,
result)
Implements an orthogonal edge style.
putValue: function(name,
obj)
Puts the given object into the registry under the given name.
getValue: function(name)
Returns the value associated with the given name.
getName: function(value)
Returns the name for the given value.
mxGraphView.prototype.setCurrentRoot = function(root)
Sets and returns the current root and fires an undo event before calling mxGraph.sizeDidChange.
mxGraphView.prototype.scaleAndTranslate = function(scale,
dx,
dy)
Sets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.
mxGraphView.prototype.setScale = function(value)
Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
mxGraphView.prototype.setTranslate = function(dx,
dy)
Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
Action to change the current root in a view.
function mxGraphView(graph)
Constructs a new view for the given mxGraph.
mxGraphView.prototype.doneResource
Specifies the resource key for the status message after a long operation.
mxGraphView.prototype.allowEval
Specifies if string values in cell styles should be evaluated using mxUtils.eval.
mxGraphView.prototype.captureDocumentGesture
Specifies if a gesture should be captured when it goes outside of the graph container.
mxGraphView.prototype.optimizeVmlReflows
Specifies if the canvas should be hidden while rendering in IE8 standards mode and quirks mode.
mxGraphView.prototype.rendering
Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
mxGraphView.prototype.graph
Reference to the enclosing mxGraph.
mxGraphView.prototype.currentRoot
mxCell that acts as the root of the displayed cell hierarchy.
mxGraphView.prototype.graphBounds
mxRectangle that caches the scales, translated bounds of the current view.
mxGraphView.prototype.scale
Specifies the scale.
mxGraphView.prototype.translate
mxPoint that specifies the current translation.
mxGraphView.prototype.states
mxDictionary that maps from cell IDs to mxCellStates.
A wrapper class for an associative array with object keys.
mxGraphView.prototype.updateStyle
Specifies if the style should be updated in each validation step.
mxGraphView.prototype.lastNode
During validation, this contains the last DOM node that was processed.
mxGraphView.prototype.lastHtmlNode
During validation, this contains the last HTML DOM node that was processed.
mxGraphView.prototype.lastForegroundNode
During validation, this contains the last edge’s DOM node that was processed.
mxGraphView.prototype.lastForegroundHtmlNode
During validation, this contains the last edge HTML DOM node that was processed.
mxGraphView.prototype.getGraphBounds = function()
Returns graphBounds.
mxGraphView.prototype.setGraphBounds = function(value)
Sets graphBounds.
mxGraphView.prototype.getBounds = function(cells)
Returns the union of all mxCellStates for the given array of mxCells.
mxGraph.prototype.sizeDidChange = function()
Called when the size of the graph has changed.
mxGraphView.prototype.revalidate = function()
Revalidates the complete view with all cell states.
mxGraphView.prototype.getScale = function()
Returns the scale.
mxGraphView.prototype.getTranslate = function()
Returns the translate.
mxGraphView.prototype.viewStateChanged = function()
Invoked after scale and/or translate has changed.
mxGraphView.prototype.refresh = function()
Clears the view if currentRoot is not null and revalidates.
mxGraphView.prototype.clear = function(cell,
force,
recurse)
Removes the state of the given cell and all descendants if the given cell is not the current root.
mxGraphView.prototype.invalidate = function(cell,
recurse,
includeEdges)
Invalidates the state of the given cell, all its descendants and connected edges.
mxGraphView.prototype.validate = function(cell)
Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
mxGraphView.prototype.validateCell = function(cell,
visible)
Recursively creates the cell state for the given cell if visible is true and the given cell is visible.
mxGraphView.prototype.validateCellState = function(cell,
recurse)
Validates and repaints the mxCellState for the given mxCell.
mxGraphView.prototype.getBoundingBox = function(state,
recurse)
Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
mxGraphView.prototype.getEmptyBounds = function()
Returns the bounds for an empty graph.
mxGraphView.prototype.createBackgroundPageShape = function(bounds)
Creates and returns the shape used as the background page.
mxGraphView.prototype.validateBackground = function()
Calls validateBackgroundImage and validateBackgroundPage.
mxGraphView.prototype.validateBackgroundImage = function()
Validates the background image.
mxGraphView.prototype.validateBackgroundPage = function()
Validates the background page.
mxGraphView.prototype.getBackgroundPageBounds = function()
Returns the bounds for the background page.
mxGraphView.prototype.redrawBackgroundImage = function(backgroundImage,
bg)
Updates the bounds and redraws the background image.
mxGraphView.prototype.updateCellState = function(state)
Updates the given mxCellState.
mxGraphView.prototype.isCellCollapsed = function(cell)
Returns true if the children of the given cell should not be visible in the view.
mxGraphView.prototype.updateVertexState = function(state,
geo)
Validates the given cell state.
mxGraphView.prototype.updateEdgeState = function(state,
geo)
Validates the given cell state.
mxGraphView.prototype.updateVertexLabelOffset = function(state)
Updates the absoluteOffset of the given vertex cell state.
mxGraphView.prototype.resetValidationState = function()
Resets the current validation state.
mxGraphView.prototype.stateValidated = function(state)
Invoked when a state has been processed in validatePoints.
mxGraphView.prototype.updateFixedTerminalPoints = function(edge,
source,
target)
Sets the initial absolute terminal points in the given state before the edge style is computed.
mxGraphView.prototype.updateFixedTerminalPoint = function(edge,
terminal,
source,
constraint)
Sets the fixed source or target terminal point on the given edge.
mxGraphView.prototype.getFixedTerminalPoint = function(edge,
terminal,
source,
constraint)
Returns the fixed source or target terminal point for the given edge.
mxGraphView.prototype.updateBoundsFromStencil = function(state)
Updates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.
mxGraphView.prototype.updatePoints = function(edge,
points,
source,
target)
Updates the absolute points in the given state using the specified array of mxPoints as the relative points.
mxGraphView.prototype.transformControlPoint = function(state,
pt)
Transforms the given control point to an absolute point.
mxGraphView.prototype.isLoopStyleEnabled = function(edge,
points,
source,
target)
Returns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.
mxGraph.prototype.defaultLoopStyle
mxEdgeStyle to be used for loops.
Defines the key for the loop style.
mxGraphView.prototype.getEdgeStyle = function(edge,
points,
source,
target)
Returns the edge style function to be used to render the given edge state.
mxGraphView.prototype.updateFloatingTerminalPoints = function(state,
source,
target)
Updates the terminal points in the given state after the edge style was computed for the edge.
mxGraphView.prototype.updateFloatingTerminalPoint = function(edge,
start,
end,
source)
Updates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.
mxGraphView.prototype.getFloatingTerminalPoint = function(edge,
start,
end,
source)
Returns the floating terminal point for the given edge, start and end state, where start is the source if source is true.
mxGraphView.prototype.getTerminalPort = function(state,
terminal,
source)
Returns an mxCellState that represents the source or target terminal or port for the given edge.
mxGraphView.prototype.getPerimeterPoint = function(terminal,
next,
orthogonal,
border)
Returns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.
mxGraphView.prototype.getRoutingCenterX = function (state)
Returns the x-coordinate of the center point for automatic routing.
mxGraphView.prototype.getRoutingCenterY = function (state)
Returns the y-coordinate of the center point for automatic routing.
mxGraphView.prototype.getPerimeterBounds = function(terminal,
border)
Returns the perimeter bounds for the given terminal, edge pair as an mxRectangle.
mxGraphView.prototype.getPerimeterFunction = function(state)
Returns the perimeter function for the given state.
mxGraphView.prototype.getNextPoint = function(edge,
opposite,
source)
Returns the nearest point in the list of absolute points or the center of the opposite terminal.
mxGraphView.prototype.getVisibleTerminal = function(edge,
source)
Returns the nearest ancestor terminal that is visible.
mxGraphView.prototype.updateEdgeBounds = function(state)
Updates the given state using the bounding box of t he absolute points.
mxGraphView.prototype.getPoint = function(state,
geometry)
Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
mxGraphView.prototype.getRelativePoint = function(edgeState,
x,
y)
Gets the relative point that describes the given, absolute label position for the given edge state.
mxGraphView.prototype.updateEdgeLabelOffset = function(state)
Updates mxCellState.absoluteOffset for the given state.
mxGraphView.prototype.getState = function(cell,
create)
Returns the mxCellState for the given cell.
mxGraphView.prototype.isRendering = function()
Returns rendering.
mxGraphView.prototype.setRendering = function(value)
Sets rendering.
mxGraphView.prototype.isAllowEval = function()
Returns allowEval.
mxGraphView.prototype.setAllowEval = function(value)
Sets allowEval.
mxGraphView.prototype.getStates = function()
Returns states.
mxGraphView.prototype.setStates = function(value)
Sets states.
mxGraphView.prototype.getCellStates = function(cells)
Returns the mxCellStates for the given array of mxCells.
mxGraphView.prototype.removeState = function(cell)
Removes and returns the mxCellState for the given cell.
mxGraphView.prototype.createState = function(cell)
Creates and returns an mxCellState for the given cell and initializes it using mxCellRenderer.initialize.
mxGraphView.prototype.getCanvas = function()
Returns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.
mxGraphView.prototype.getBackgroundPane = function()
Returns the DOM node that represents the background layer.
mxGraphView.prototype.getDrawPane = function()
Returns the DOM node that represents the main drawing layer.
mxGraphView.prototype.getOverlayPane = function()
Returns the DOM node that represents the layer above the drawing layer.
mxGraphView.prototype.getDecoratorPane = function()
Returns the DOM node that represents the topmost drawing layer.
mxGraphView.prototype.isContainerEvent = function(evt)
Returns true if the event origin is one of the drawing panes or containers of the view.
mxGraphView.prototype.isScrollEvent = function(evt)
Returns true if the event origin is one of the scrollbars of the container in IE.
mxGraphView.prototype.init = function()
Initializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.
mxGraphView.prototype.createHtml = function()
Creates the DOM nodes for the HTML display.
mxGraphView.prototype.installListeners = function()
Installs the required listeners in the container.
mxGraphView.prototype.updateHtmlCanvasSize = function(width,
height)
Updates the size of the HTML canvas.
mxGraphView.prototype.createHtmlPane = function(width,
height)
Creates and returns a drawing pane in HTML (DIV).
mxGraphView.prototype.createVmlPane = function(width,
height)
Creates a drawing pane in VML (group).
mxGraphView.prototype.updateContainerStyle = function(container)
Updates the style of the container after installing the SVG DOM elements.
mxGraphView.prototype.destroy = function()
Destroys the view and all its resources.
function mxCurrentRootChange(view,
root)
Constructs a change of the current root in the given view.
mxCurrentRootChange.prototype.execute = function()
Changes the current root of the view.
mxGraph.prototype.alignCells = function(align,
cells,
param)
Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
mxGraph.prototype.flipEdge = function(edge)
Toggles the style of the given edge between null (or empty) and alternateEdgeStyle.
mxGraph.prototype.orderCells = function(back,
cells)
Moves the given cells to the front or back.
mxGraph.prototype.cellsOrdered = function(cells,
back)
Moves the given cells to the front or back.
mxGraph.prototype.groupCells = function(group,
border,
cells)
Adds the cells into the given group.
mxGraph.prototype.ungroupCells = function(cells)
Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups.
mxGraph.prototype.removeCellsFromParent = function(cells)
Removes the specified cells from their parents and adds them to the default parent.
mxGraph.prototype.addCells = function(cells,
parent,
index,
source,
target)
Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
mxGraph.prototype.cellsAdded = function(cells,
parent,
index,
source,
target,
absolute,
constrain,
extend)
Adds the specified cells to the given parent.
mxGraph.prototype.removeCells = function(cells,
includeEdges)
Removes the given cells from the graph including all connected edges if includeEdges is true.
mxGraph.prototype.cellsRemoved = function(cells)
Removes the given cells from the model.
mxGraph.prototype.splitEdge = function(edge,
cells,
newEdge,
dx,
dy)
Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
mxGraph.prototype.toggleCells = function(show,
cells,
includeEdges)
Sets the visible state of the specified cells and all connected edges if includeEdges is true.
mxGraph.prototype.foldCells = function(collapse,
recurse,
cells,
checkFoldable,
evt)
Sets the collapsed state of the specified cells and all descendants if recurse is true.
mxGraph.prototype.updateCellSize = function(cell,
ignoreChildren)
Updates the size of the given cell in the model using cellSizeUpdated.
mxGraph.prototype.resizeCells = function(cells,
bounds,
recurse)
Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
mxGraph.prototype.cellsResized = function(cells,
bounds,
recurse)
Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
mxGraph.prototype.moveCells = function(cells,
dx,
dy,
clone,
target,
evt,
mapping)
Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
mxGraph.prototype.cellsMoved = function(cells,
dx,
dy,
disconnect,
constrain,
extend)
Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
mxGraph.prototype.connectCell = function(edge,
terminal,
source,
constraint)
Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
mxGraph.prototype.cellConnected = function(edge,
terminal,
source,
constraint)
Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
mxGraph.prototype.refresh = function(cell)
Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
mxGraph.prototype.click = function(me)
Processes a singleclick on an optional cell and fires a click event.
mxGraph.prototype.dblClick = function(evt,
cell)
Processes a doubleclick on an optional cell and fires a dblclick event.
mxGraph.prototype.fireGestureEvent = function(evt,
cell)
Dispatches a mxEvent.GESTURE event.
mxGraph.prototype.tapAndHold = function(me)
Handles the mxMouseEvent by highlighting the mxCellState.
mxGraph.prototype.fireMouseEvent = function(evtName,
me,
sender)
Dispatches the given event in the graph event dispatch loop.
mxGraph.prototype.startEditingAtCell = function(cell,
evt)
Fires a startEditing event and invokes mxCellEditor.startEditing on editor.
mxGraph.prototype.stopEditing = function(cancel)
Stops the current editing and fires a editingStopped event.
mxGraph.prototype.cellLabelChanged = function(cell,
value,
autoSize)
Sets the new label for a cell.
mxGraph.prototype.addCellOverlay = function(cell,
overlay)
Adds an mxCellOverlay for the specified cell.
mxGraph.prototype.removeCellOverlay = function(cell,
overlay)
Removes and returns the given mxCellOverlay from the given cell.
mxGraph.prototype.removeCellOverlays = function(cell)
Removes all mxCellOverlays from the given cell.
function mxGraph(container,
model,
renderHint,
stylesheet)
Constructs a new mxGraph in the specified container.
mxGraph.prototype.mouseListeners
Holds the mouse event listeners.
mxGraph.prototype.isMouseDown
Holds the state of the mouse button.
mxGraph.prototype.model
Holds the mxGraphModel that contains the cells to be displayed.
Extends mxEventSource to implement a graph model.
mxGraph.prototype.view
Holds the mxGraphView that caches the mxCellStates for the cells.
mxGraph.prototype.stylesheet
Holds the mxStylesheet that defines the appearance of the cells.
Defines the appearance of the cells in a graph.
mxGraph.prototype.selectionModel
Holds the mxGraphSelectionModel that models the current selection.
Implements the selection model for a graph.
mxGraph.prototype.cellEditor
Holds the mxCellEditor that is used as the in-place editing.
In-place editor for the graph.
mxGraph.prototype.cellRenderer
Holds the mxCellRenderer for rendering the cells in the graph.
mxGraph.prototype.multiplicities
An array of mxMultiplicities describing the allowed connections in a graph.
Defines invalid connections along with the error messages that they produce.
mxGraph.prototype.renderHint
RenderHint as it was passed to the constructor.
mxGraph.prototype.dialect
Dialect to be used for drawing the graph.
mxGraph.prototype.gridSize
Specifies the grid size.
mxGraph.prototype.gridEnabled
Specifies if the grid is enabled.
mxGraph.prototype.portsEnabled
Specifies if ports are enabled.
mxGraph.prototype.doubleTapEnabled
Specifies if double taps on touch-based devices should be handled as a double click.
mxGraph.prototype.doubleTapTimeout
Specifies the timeout for double taps and non-native double clicks.
mxGraph.prototype.doubleTapTolerance
Specifies the tolerance for double taps and double clicks in quirks mode.
mxGraph.prototype.lastTouchTime
Holds the time of the last touch event for double click detection.
mxGraph.prototype.tapAndHoldEnabled
Specifies if tap and hold should be used for starting connections on touch-based devices.
mxGraph.prototype.tapAndHoldDelay
Specifies the time for a tap and hold.
mxGraph.prototype.tapAndHoldInProgress
True if the timer for tap and hold events is running.
mxGraph.prototype.tapAndHoldValid
True as long as the timer is running and the touch events stay within the given tapAndHoldTolerance.
mxGraph.prototype.initialTouchX
Holds the x-coordinate of the intial touch event for tap and hold.
mxGraph.prototype.initialTouchY
Holds the y-coordinate of the intial touch event for tap and hold.
mxGraph.prototype.tolerance
Tolerance for a move to be handled as a single click.
mxGraph.prototype.defaultOverlap
Value returned by getOverlap if isAllowOverlapParent returns true for the given cell.
mxGraph.prototype.getOverlap = function(cell)
Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
mxGraph.prototype.isAllowOverlapParent = function(cell)
Returns true if the given cell is allowed to be placed outside of the parents area.
mxGraph.prototype.defaultParent
Specifies the default parent to be used to insert new cells.
mxGraph.prototype.alternateEdgeStyle
Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
mxGraph.prototype.backgroundImage
Specifies the mxImage to be returned by getBackgroundImage.
Encapsulates the URL, width and height of an image.
mxGraph.prototype.getBackgroundImage = function()
Returns the backgroundImage as an mxImage.
mxGraph.prototype.pageVisible
Specifies if the background page should be visible.
mxGraph.prototype.pageBreaksVisible
Specifies if a dashed line should be drawn between multiple pages.
mxGraph.prototype.pageBreakColor
Specifies the color for page breaks.
mxGraph.prototype.pageBreakDashed
Specifies the page breaks should be dashed.
mxGraph.prototype.minPageBreakDist
Specifies the minimum distance for page breaks to be visible.
mxGraph.prototype.preferPageSize
Specifies if the graph size should be rounded to the next page number in sizeDidChange.
mxGraph.prototype.pageFormat
Specifies the page format for the background page.
mxGraph.prototype.pageScale
Specifies the scale of the background page.
mxGraph.prototype.enabled
Specifies the return value for isEnabled.
mxGraph.prototype.isEnabled = function()
Returns true if the graph is enabled.
mxGraph.prototype.escapeEnabled
Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
Event handler that listens to keystroke events.
mxGraph.prototype.escape = function(evt)
Processes an escape keystroke.
mxGraph.prototype.invokesStopCellEditing
If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
mxGraph.prototype.enterStopsCellEditing
If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
mxGraph.prototype.useScrollbarsForPanning
Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
mxGraph.prototype.panGraph = function(dx,
dy)
Shifts the graph display by the given amount.
mxGraph.prototype.exportEnabled
Specifies the return value for canExportCell.
mxGraph.prototype.canExportCell = function(cell)
Returns true if the given cell may be exported to the clipboard.
mxGraph.prototype.importEnabled
Specifies the return value for canImportCell.
mxGraph.prototype.canImportCell = function(cell)
Returns true if the given cell may be imported from the clipboard.
mxGraph.prototype.cellsLocked
Specifies the return value for isCellLocked.
mxGraph.prototype.isCellLocked = function(cell)
Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
mxGraph.prototype.cellsCloneable
Specifies the return value for isCellCloneable.
mxGraph.prototype.isCellCloneable = function(cell)
Returns true if the given cell is cloneable.
mxGraph.prototype.foldingEnabled
Specifies if folding (collapse and expand via an image icon in the graph should be enabled).
mxGraph.prototype.cellsEditable
Specifies the return value for isCellEditable.
mxGraph.prototype.isCellEditable = function(cell)
Returns true if the given cell is editable.
mxGraph.prototype.cellsDeletable
Specifies the return value for isCellDeletable.
mxGraph.prototype.isCellDeletable = function(cell)
Returns true if the given cell is moveable.
mxGraph.prototype.cellsMovable
Specifies the return value for isCellMovable.
mxGraph.prototype.isCellMovable = function(cell)
Returns true if the given cell is moveable.
mxGraph.prototype.edgeLabelsMovable
Specifies the return value for edges in isLabelMovable.
mxGraph.prototype.isLabelMovable = function(cell)
Returns true if the given edges’s label is moveable.
mxGraph.prototype.vertexLabelsMovable
Specifies the return value for vertices in isLabelMovable.
mxGraph.prototype.dropEnabled
Specifies the return value for isDropEnabled.
mxGraph.prototype.isDropEnabled = function()
Returns dropEnabled as a boolean.
mxGraph.prototype.splitEnabled
Specifies if dropping onto edges should be enabled.
mxGraph.prototype.cellsResizable
Specifies the return value for isCellResizable.
mxGraph.prototype.isCellResizable = function(cell)
Returns true if the given cell is resizable.
mxGraph.prototype.cellsBendable
Specifies the return value for isCellsBendable.
mxGraph.prototype.isCellsBendable = function()
Returns cellsBenadable.
mxGraph.prototype.cellsSelectable
Specifies the return value for isCellSelectable.
mxGraph.prototype.isCellSelectable = function(cell)
Returns true if the given cell is selectable.
mxGraph.prototype.cellsDisconnectable
Specifies the return value for isCellDisconntable.
mxGraph.prototype.autoSizeCells
Specifies if the graph should automatically update the cell size after an edit.
mxGraph.prototype.autoSizeCellsOnAdd
Specifies if autoSize style should be applied when cells are added.
mxGraph.prototype.autoScroll
Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
mxGraph.prototype.ignoreScrollbars
Specifies if the graph should automatically scroll regardless of the scrollbars.
mxGraph.prototype.translateToScrollPosition
Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
mxGraph.prototype.timerAutoScroll
Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
mxGraph.prototype.allowAutoPanning
Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
mxGraph.prototype.scrollPointToVisible = function(x,
y,
extend,
border)
Scrolls the graph to the given point, extending the graph container if specified.
mxGraph.prototype.autoExtend
Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
mxGraph.prototype.maximumGraphBounds
mxRectangle that specifies the area in which all cells in the diagram should be placed.
mxGraph.prototype.minimumGraphSize
mxRectangle that specifies the minimum size of the graph.
mxGraph.prototype.minimumContainerSize
mxRectangle that specifies the minimum size of the container if resizeContainer is true.
mxGraph.prototype.resizeContainer
Specifies if the container should be resized to the graph size when the graph size has changed.
mxGraph.prototype.maximumContainerSize
mxRectangle that specifies the maximum size of the container if resizeContainer is true.
mxGraph.prototype.border
Border to be added to the bottom and right side when the container is being resized after the graph has been changed.
mxGraph.prototype.keepEdgesInForeground
Specifies if edges should appear in the foreground regardless of their order in the model.
mxGraph.prototype.keepEdgesInBackground
Specifies if edges should appear in the background regardless of their order in the model.
mxGraph.prototype.allowNegativeCoordinates
Specifies if negative coordinates for vertices are allowed.
mxGraph.prototype.constrainChildren
Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.
mxGraph.prototype.constrainRelativeChildren
Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
mxGraph.prototype.extendParents
Specifies if a parent should contain the child bounds after a resize of the child.
mxGraph.prototype.extendParentsOnAdd
Specifies if parents should be extended according to the extendParents switch if cells are added.
mxGraph.prototype.recursiveResize
Specifies the return value for isRecursiveResize.
mxGraph.prototype.isRecursiveResize = function(state)
Returns recursiveResize.
mxGraph.prototype.collapseToPreferredSize
Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.
mxGraph.prototype.zoomFactor
Specifies the factor used for zoomIn and zoomOut.
mxGraph.prototype.zoomIn = function()
Zooms into the graph by zoomFactor.
mxGraph.prototype.zoomOut = function()
Zooms out of the graph by zoomFactor.
mxGraph.prototype.keepSelectionVisibleOnZoom
Specifies if the viewport should automatically contain the selection cells after a zoom operation.
mxGraph.prototype.centerZoom
Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
mxGraph.prototype.resetViewOnRootChange
Specifies if the scale and translate should be reset if the root changes in the model.
mxGraph.prototype.resetEdgesOnResize
Specifies if edge control points should be reset after the resize of a connected cell.
mxGraph.prototype.resetEdgesOnMove
Specifies if edge control points should be reset after the move of a connected cell.
mxGraph.prototype.resetEdgesOnConnect
Specifies if edge control points should be reset after the the edge has been reconnected.
mxGraph.prototype.allowLoops
Specifies if loops (aka self-references) are allowed.
Provides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.
mxGraph.prototype.multigraph
Specifies if multiple edges in the same direction between the same pair of vertices are allowed.
mxGraph.prototype.connectableEdges
Specifies if edges are connectable.
mxGraph.prototype.allowDanglingEdges
Specifies if edges with disconnected terminals are allowed in the graph.
mxGraph.prototype.cloneInvalidEdges
Specifies if edges that are cloned should be validated and only inserted if they are valid.
mxGraph.prototype.disconnectOnMove
Specifies if edges should be disconnected from their terminals when they are moved.
mxGraph.prototype.labelsVisible
Specifies if labels should be visible.
mxGraph.prototype.htmlLabels
Specifies the return value for isHtmlLabel.
mxGraph.prototype.isHtmlLabel = function(cell)
Returns true if the label must be rendered as HTML markup.
mxGraph.prototype.swimlaneSelectionEnabled
Specifies if swimlanes should be selectable via the content if the mouse is released.
mxGraph.prototype.swimlaneNesting
Specifies if nesting of swimlanes is allowed.
mxGraph.prototype.swimlaneIndicatorColorAttribute
The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
mxGraph.prototype.imageBundles
Holds the list of image bundles.
mxGraph.prototype.minFitScale
Specifies the minimum scale to be applied in fit.
mxGraph.prototype.fit = function(border,
keepOrigin,
margin,
enabled,
ignoreWidth,
ignoreHeight,
maxHeight)
Scales the graph such that the complete diagram fits into container and returns the current scale in the view.
mxGraph.prototype.maxFitScale
Specifies the maximum scale to be applied in fit.
mxGraph.prototype.panDx
Current horizontal panning value.
mxGraph.prototype.panDy
Current vertical panning value.
mxGraph.prototype.collapsedImage
Specifies the mxImage to indicate a collapsed state.
mxGraph.prototype.expandedImage
Specifies the mxImage to indicate a expanded state.
mxGraph.prototype.warningImage
Specifies the mxImage for the image to be used to display a warning overlay.
mxGraph.prototype.alreadyConnectedResource
Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
mxGraph.prototype.containsValidationErrorsResource
Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
mxGraph.prototype.collapseExpandResource
Specifies the resource key for the tooltip on the collapse/expand icon.
mxGraph.prototype.init = function(container)
Initializes the container and creates the respective datastructures.
mxGraph.prototype.createHandlers = function()
Creates the tooltip-, panning-, connection- and graph-handler (in this order).
mxGraph.prototype.createTooltipHandler = function()
Creates and returns a new mxTooltipHandler to be used in this graph.
Graph event handler that displays tooltips.
mxGraph.prototype.createSelectionCellsHandler = function()
Creates and returns a new mxTooltipHandler to be used in this graph.
mxGraph.prototype.createConnectionHandler = function()
Creates and returns a new mxConnectionHandler to be used in this graph.
Graph event handler that creates new connections.
mxGraph.prototype.createGraphHandler = function()
Creates and returns a new mxGraphHandler to be used in this graph.
Graph event handler that handles selection.
mxGraph.prototype.createPanningHandler = function()
Creates and returns a new mxPanningHandler to be used in this graph.
Event handler that pans and creates popupmenus.
mxGraph.prototype.createPopupMenuHandler = function()
Creates and returns a new mxPopupMenuHandler to be used in this graph.
Event handler that creates popupmenus.
mxGraph.prototype.createSelectionModel = function()
Creates a new mxGraphSelectionModel to be used in this graph.
mxGraph.prototype.createStylesheet = function()
Creates a new mxGraphSelectionModel to be used in this graph.
mxGraph.prototype.createGraphView = function()
Creates a new mxGraphView to be used in this graph.
mxGraph.prototype.createCellRenderer = function()
Creates a new mxCellRenderer to be used in this graph.
mxGraph.prototype.createCellEditor = function()
Creates a new mxCellEditor to be used in this graph.
mxGraph.prototype.getModel = function()
Returns the mxGraphModel that contains the cells.
mxGraph.prototype.getView = function()
Returns the mxGraphView that contains the mxCellStates.
mxGraph.prototype.getStylesheet = function()
Returns the mxStylesheet that defines the style.
mxGraph.prototype.setStylesheet = function(stylesheet)
Sets the mxStylesheet that defines the style.
mxGraph.prototype.getSelectionModel = function()
Returns the mxGraphSelectionModel that contains the selection.
mxGraph.prototype.setSelectionModel = function(selectionModel)
Sets the mxSelectionModel that contains the selection.
mxGraph.prototype.getSelectionCellsForChanges = function(changes)
Returns the cells to be selected for the given array of changes.
mxGraph.prototype.graphModelChanged = function(changes)
Called when the graph model changes.
mxGraph.prototype.updateSelection = function()
Removes selection cells that are not in the model from the selection.
mxGraph.prototype.processChange = function(change)
Processes the given change and invalidates the respective cached data in view.
mxGraph.prototype.removeStateForCell = function(cell)
Removes all cached information for the given cell and its descendants.
mxGraph.prototype.getCellOverlays = function(cell)
Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
mxGraph.prototype.clearCellOverlays = function(cell)
Removes all mxCellOverlays in the graph for the given cell and all its descendants.
mxGraph.prototype.setCellWarning = function(cell,
warning,
img,
isSelect)
Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
mxGraph.prototype.startEditing = function(evt)
Calls startEditingAtCell using the given cell or the first selection cell.
mxGraph.prototype.getEditingValue = function(cell,
evt)
Returns the initial value for in-place editing.
Fires between begin- and endUpdate in cellLabelChanged.
Base class for all mouse events in mxGraph.
mxGraph.prototype.createPanningManager = function()
Creates and returns an mxPanningManager.
Implements a handler for panning.
mxGraph.prototype.getBorderSizes = function()
Returns the size of the border and padding on all four sides of the container.
mxGraph.prototype.getPreferredPageSize = function(bounds,
width,
height)
Returns the preferred size of the background page if preferPageSize is true.
mxGraph.prototype.doResizeContainer = function(width,
height)
Resizes the container for the given graph width and height.
mxGraph.prototype.updatePageBreaks = function(visible,
width,
height)
Invokes from sizeDidChange to redraw the page breaks.
mxGraph.prototype.getCellStyle = function(cell)
Returns an array of key, value pairs representing the cell style for the given cell.
mxGraph.prototype.postProcessCellStyle = function(style)
Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
mxGraph.prototype.setCellStyle = function(style,
cells)
Sets the style of the specified cells.
mxGraph.prototype.toggleCellStyle = function(key,
defaultValue,
cell)
Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
mxGraph.prototype.toggleCellStyles = function(key,
defaultValue,
cells)
Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
mxGraph.prototype.setCellStyles = function(key,
value,
cells)
Sets the key to value in the styles of the given cells.
mxGraph.prototype.toggleCellStyleFlags = function(key,
flag,
cells)
Toggles the given bit for the given key in the styles of the specified cells.
mxGraph.prototype.setCellStyleFlags = function(key,
flag,
value,
cells)
Sets or toggles the given bit for the given key in the styles of the specified cells.
mxGraph.prototype.addImageBundle = function(bundle)
Adds the specified mxImageBundle.
Maps from keys to base64 encoded images or file locations.
mxGraph.prototype.removeImageBundle = function(bundle)
Removes the specified mxImageBundle.
mxGraph.prototype.getImageFromBundles = function(key)
Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
mxGraph.prototype.getCellsForGroup = function(cells)
Returns the cells with the same parent as the first cell in the given array.
mxGraph.prototype.getBoundsForGroup = function(group,
children,
border)
Returns the bounds to be used for the given group and children.
mxGraph.prototype.createGroupCell = function(cells)
Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the group function.
mxGraph.prototype.removeCellsAfterUngroup = function(cells)
Hook to remove the groups after ungroupCells.
mxGraph.prototype.getBoundingBox = function(cells)
Returns the bounding box for the given array of mxCells.
mxGraph.prototype.cloneCell = function(cell,
allowInvalidEdges,
mapping,
keepPosition)
Returns the clone for the given cell.
mxGraph.prototype.cloneCells = function(cells,
allowInvalidEdges,
mapping,
keepPosition)
Returns the clones for the given cells.
mxGraph.prototype.insertVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)
Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
mxGraph.prototype.createVertex = function(parent,
id,
value,
x,
y,
width,
height,
style,
relative)
Hook method that creates the new vertex for insertVertex.
mxGraph.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)
Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
mxGraph.prototype.createEdge = function(parent,
id,
value,
source,
target,
style)
Hook method that creates the new edge for insertEdge.
mxGraph.prototype.addEdge = function(edge,
parent,
source,
target,
index)
Adds the edge to the parent and connects it to the given source and target terminals.
mxGraph.prototype.addCell = function(cell,
parent,
index,
source,
target)
Adds the cell to the parent and connects it to the given source and target terminals.
mxGraph.prototype.autoSizeCell = function(cell,
recurse)
Resizes the specified cell to just fit around the its label and/or children
mxGraph.prototype.cellsToggled = function(cells,
show)
Sets the visible state of the specified cells.
mxGraph.prototype.cellsFolded = function(cells,
collapse,
recurse,
checkFoldable)
Sets the collapsed state of the specified cells.
mxGraph.prototype.swapBounds = function(cell,
willCollapse)
Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
mxGraph.prototype.updateAlternateBounds = function(cell,
geo,
willCollapse)
Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
mxGraph.prototype.addAllEdges = function(cells)
Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.
mxGraph.prototype.getAllEdges = function(cells)
Returns all edges connected to the given cells or its descendants.
mxGraph.prototype.cellSizeUpdated = function(cell,
ignoreChildren)
Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
mxGraph.prototype.getPreferredSizeForCell = function(cell)
Returns the preferred width and height of the given mxCell as an mxRectangle.
mxGraph.prototype.resizeCell = function(cell,
bounds,
recurse)
Sets the bounds of the given cell using resizeCells.
Fires between begin- and endUpdate in resizeCells.
Fires between begin- and endUpdate in cellsResized.
mxGraph.prototype.cellResized = function(cell,
bounds,
ignoreRelative,
recurse)
Resizes the parents recursively so that they contain the complete area of the resized child cell.
mxGraph.prototype.resizeChildCells = function(cell,
newGeo)
Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
mxGraph.prototype.constrainChildCells = function(cell)
Constrains the children of the given cell using constrainChild.
mxGraph.prototype.constrainChild = function(cell,
sizeFirst)
Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
mxGraph.prototype.scaleCell = function(cell,
dx,
dy,
recurse)
Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
mxGraph.prototype.extendParent = function(cell)
Resizes the parents recursively so that they contain the complete area of the resized child cell.
mxGraph.prototype.importCells = function(cells,
dx,
dy,
target,
evt,
mapping)
Clones and inserts the given cells into the graph using the move method and returns the inserted cells.
mxGraph.prototype.translateCell = function(cell,
dx,
dy)
Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
mxGraph.prototype.getCellContainmentArea = function(cell)
Returns the mxRectangle inside which a cell is to be kept.
mxGraph.prototype.getMaximumGraphBounds = function()
Returns the bounds inside which the diagram should be kept as an mxRectangle.
mxGraph.prototype.isConstrainChild = function(cell)
Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
mxGraph.prototype.resetEdges = function(cells)
Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
mxGraph.prototype.resetEdge = function(edge)
Resets the control points of the given edge.
mxGraph.prototype.getOutlineConstraint = function(point,
terminalState,
me)
Returns the constraint used to connect to the outline of the given state.
mxGraph.prototype.getAllConnectionConstraints = function(terminal,
source)
Returns an array of all mxConnectionConstraints for the given terminal.
mxGraph.prototype.getConnectionConstraint = function(edge,
terminal,
source)
Returns an mxConnectionConstraint that describes the given connection point.
mxGraph.prototype.setConnectionConstraint = function(edge,
terminal,
source,
constraint)
Sets the mxConnectionConstraint that describes the given connection point.
mxGraph.prototype.getConnectionPoint = function(vertex,
constraint,
round)
Returns the nearest point in the list of absolute points or the center of the opposite terminal.
Fires between begin- and endUpdate in connectCell.
mxGraph.prototype.disconnectGraph = function(cells)
Disconnects the given edges from the terminals which are not in the given array.
mxGraph.prototype.getCurrentRoot = function()
Returns the current root of the displayed cell hierarchy.
mxGraph.prototype.getTranslateForRoot = function(cell)
Returns the translation to be used if the given cell is the root cell as an mxPoint.
mxGraph.prototype.isPort = function(cell)
Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
mxGraph.prototype.getTerminalForPort = function(cell,
source)
Returns the terminal to be used for a given port.
mxGraph.prototype.getChildOffsetForCell = function(cell)
Returns the offset to be used for the cells inside the given cell.
mxGraph.prototype.enterGroup = function(cell)
Uses the given cell as the root of the displayed cell hierarchy.
mxGraph.prototype.exitGroup = function()
Changes the current root to the next valid root in the displayed cell hierarchy.
mxGraph.prototype.home = function()
Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
mxGraph.prototype.isValidRoot = function(cell)
Returns true if the given cell is a valid root for the cell display hierarchy.
mxGraph.prototype.getGraphBounds = function()
Returns the bounds of the visible graph.
mxGraph.prototype.getCellBounds = function(cell,
includeEdges,
includeDescendants)
Returns the scaled, translated bounds for the given cell.
mxGraph.prototype.getBoundingBoxFromGeometry = function(cells,
includeEdges)
Returns the bounding box for the geometries of the vertices in the given array of cells.
mxGraph.prototype.snap = function(value)
Snaps the given numeric value to the grid if gridEnabled is true.
mxGraph.prototype.zoomActual = function()
Resets the zoom and panning in the view.
mxGraph.prototype.zoomTo = function(scale,
center)
Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
mxGraph.prototype.zoom = function(factor,
center)
Zooms the graph using the given factor.
mxGraph.prototype.center = function(horizontal,
vertical,
cx,
cy)
Centers the graph in the container.
mxGraph.prototype.zoomToRect = function(rect)
Zooms the graph to the specified rectangle.
mxGraph.prototype.scrollCellToVisible = function(cell,
center)
Pans the graph so that it shows the given cell.
mxGraph.prototype.scrollRectToVisible = function(rect)
Pans the graph so that it shows the given rectangle.
mxGraph.prototype.getCellGeometry = function(cell)
Returns the mxGeometry for the given cell.
mxGraph.prototype.isCellVisible = function(cell)
Returns true if the given cell is visible in this graph.
mxGraph.prototype.isCellCollapsed = function(cell)
Returns true if the given cell is collapsed in this graph.
mxGraph.prototype.isCellConnectable = function(cell)
Returns true if the given cell is connectable in this graph.
mxGraph.prototype.isOrthogonal = function(edge)
Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
mxGraph.prototype.isLoop = function(state)
Returns true if the given cell state is a loop.
mxGraph.prototype.isCloneEvent = function(evt)
Returns true if the given event is a clone event.
mxGraph.prototype.isTransparentClickEvent = function(evt)
Hook for implementing click-through behaviour on selected cells.
mxGraph.prototype.isToggleEvent = function(evt)
Returns true if the given event is a toggle event.
mxGraph.prototype.isGridEnabledEvent = function(evt)
Returns true if the given mouse event should be aligned to the grid.
mxGraph.prototype.isConstrainedEvent = function(evt)
Returns true if the given mouse event should be aligned to the grid.
mxGraph.prototype.isIgnoreTerminalEvent = function(evt)
Returns true if the given mouse event should not allow any connections to be made.
mxGraph.prototype.validationAlert = function(message)
Displays the given validation error in a dialog.
mxGraph.prototype.isEdgeValid = function(edge,
source,
target)
Checks if the return value of getEdgeValidationError for the given arguments is null.
mxGraph.prototype.getEdgeValidationError = function(edge,
source,
target)
Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
mxGraph.prototype.validateEdge = function(edge,
source,
target)
Hook method for subclassers to return an error message for the given edge and terminals.
mxGraph.prototype.validateGraph = function(cell,
context)
Validates the graph by validating each descendant of the given cell or the root of the model.
mxGraph.prototype.getCellValidationError = function(cell)
Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
mxGraph.prototype.validateCell = function(cell,
context)
Hook method for subclassers to return an error message for the given cell and validation context.
mxGraph.prototype.setBackgroundImage = function(image)
Sets the new backgroundImage.
mxGraph.prototype.getFoldingImage = function(state)
Returns the mxImage used to display the collapsed state of the specified cell state.
mxGraph.prototype.convertValueToString = function(cell)
Returns the textual representation for the given cell.
mxGraph.prototype.getLabel = function(cell)
Returns a string or DOM node that represents the label for the given cell.
mxGraph.prototype.isHtmlLabels = function()
Returns htmlLabels.
mxGraph.prototype.setHtmlLabels = function(value)
Sets htmlLabels.
mxGraph.prototype.isWrapping = function(cell)
This enables wrapping for HTML labels.
mxGraph.prototype.isLabelClipped = function(cell)
Returns true if the overflow portion of labels should be hidden.
mxGraph.prototype.getTooltip = function(state,
node,
x,
y)
Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
mxGraph.prototype.getTooltipForCell = function(cell)
Returns the string or DOM node to be used as the tooltip for the given cell.
mxGraph.prototype.getLinkForCell = function(cell)
Returns the string to be used as the link for the given cell.
mxGraph.prototype.getCursorForMouseEvent = function(me)
Returns the cursor value to be used for the CSS of the shape for the given event.
mxGraph.prototype.getCursorForCell = function(cell)
Returns the cursor value to be used for the CSS of the shape for the given cell.
mxGraph.prototype.getStartSize = function(swimlane)
Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
mxGraph.prototype.getImage = function(state)
Returns the image URL for the given cell state.
mxGraph.prototype.getVerticalAlign = function(state)
Returns the vertical alignment for the given cell state.
mxGraph.prototype.getIndicatorColor = function(state)
Returns the indicator color for the given cell state.
mxGraph.prototype.getIndicatorGradientColor = function(state)
Returns the indicator gradient color for the given cell state.
mxGraph.prototype.getIndicatorShape = function(state)
Returns the indicator shape for the given cell state.
mxGraph.prototype.getIndicatorImage = function(state)
Returns the indicator image for the given cell state.
mxGraph.prototype.getBorder = function()
Returns the value of border.
mxGraph.prototype.setBorder = function(value)
Sets the value of border.
mxGraph.prototype.isSwimlane = function (cell)
Returns true if the given cell is a swimlane in the graph.
mxGraph.prototype.isResizeContainer = function()
Returns resizeContainer.
mxGraph.prototype.setResizeContainer = function(value)
Sets resizeContainer.
mxGraph.prototype.setEnabled = function(value)
Specifies if the graph should allow any interactions.
mxGraph.prototype.isEscapeEnabled = function()
Returns escapeEnabled.
mxGraph.prototype.setEscapeEnabled = function(value)
Sets escapeEnabled.
mxGraph.prototype.isInvokesStopCellEditing = function()
Returns invokesStopCellEditing.
mxGraph.prototype.setInvokesStopCellEditing = function(value)
Sets invokesStopCellEditing.
mxGraph.prototype.isEnterStopsCellEditing = function()
Returns enterStopsCellEditing.
mxGraph.prototype.setEnterStopsCellEditing = function(value)
Sets enterStopsCellEditing.
mxGraph.prototype.isCellsLocked = function()
Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
mxGraph.prototype.setCellsLocked = function(value)
Sets if any cell may be moved, sized, bended, disconnected, edited or selected.
mxGraph.prototype.getCloneableCells = function(cells)
Returns the cells which may be exported in the given array of cells.
mxGraph.prototype.isCellsCloneable = function()
Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
mxGraph.prototype.setCellsCloneable = function(value)
Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
mxGraph.prototype.getExportableCells = function(cells)
Returns the cells which may be exported in the given array of cells.
mxGraph.prototype.getImportableCells = function(cells)
Returns the cells which may be imported in the given array of cells.
mxGraph.prototype.isCellsSelectable = function()
Returns cellsSelectable.
mxGraph.prototype.setCellsSelectable = function(value)
Sets cellsSelectable.
mxGraph.prototype.getDeletableCells = function(cells)
Returns the cells which may be exported in the given array of cells.
mxGraph.prototype.isCellsDeletable = function()
Returns cellsDeletable.
mxGraph.prototype.setCellsDeletable = function(value)
Sets cellsDeletable.
mxGraph.prototype.isCellRotatable = function(cell)
Returns true if the given cell is rotatable.
mxGraph.prototype.getMovableCells = function(cells)
Returns the cells which are movable in the given array of cells.
mxGraph.prototype.isCellsMovable = function()
Returns cellsMovable.
mxGraph.prototype.setCellsMovable = function(value)
Specifies if the graph should allow moving of cells.
mxGraph.prototype.isGridEnabled = function()
Returns gridEnabled as a boolean.
mxGraph.prototype.setGridEnabled = function(value)
Specifies if the grid should be enabled.
mxGraph.prototype.isPortsEnabled = function()
Returns portsEnabled as a boolean.
mxGraph.prototype.setPortsEnabled = function(value)
Specifies if the ports should be enabled.
mxGraph.prototype.getGridSize = function()
Returns gridSize.
mxGraph.prototype.setGridSize = function(value)
Sets gridSize.
mxGraph.prototype.getTolerance = function()
Returns tolerance.
mxGraph.prototype.setTolerance = function(value)
Sets tolerance.
mxGraph.prototype.isVertexLabelsMovable = function()
Returns vertexLabelsMovable.
mxGraph.prototype.setVertexLabelsMovable = function(value)
Sets vertexLabelsMovable.
mxGraph.prototype.isEdgeLabelsMovable = function()
Returns edgeLabelsMovable.
mxGraph.prototype.isSwimlaneNesting = function()
Returns swimlaneNesting as a boolean.
mxGraph.prototype.setSwimlaneNesting = function(value)
Specifies if swimlanes can be nested by drag and drop.
mxGraph.prototype.isSwimlaneSelectionEnabled = function()
Returns swimlaneSelectionEnabled as a boolean.
mxGraph.prototype.setSwimlaneSelectionEnabled = function(value)
Specifies if swimlanes should be selected if the mouse is released over their content area.
mxGraph.prototype.isMultigraph = function()
Returns multigraph as a boolean.
mxGraph.prototype.setMultigraph = function(value)
Specifies if the graph should allow multiple connections between the same pair of vertices.
mxGraph.prototype.isAllowLoops = function()
Returns allowLoops as a boolean.
mxGraph.prototype.setAllowDanglingEdges = function(value)
Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
mxGraph.prototype.isAllowDanglingEdges = function()
Returns allowDanglingEdges as a boolean.
mxGraph.prototype.setConnectableEdges = function(value)
Specifies if edges should be connectable.
mxGraph.prototype.isConnectableEdges = function()
Returns connectableEdges as a boolean.
mxGraph.prototype.setCloneInvalidEdges = function(value)
Specifies if edges should be inserted when cloned but not valid wrt.
mxGraph.prototype.isCloneInvalidEdges = function()
Returns cloneInvalidEdges as a boolean.
mxGraph.prototype.setAllowLoops = function(value)
Specifies if loops are allowed.
mxGraph.prototype.isDisconnectOnMove = function()
Returns disconnectOnMove as a boolean.
mxGraph.prototype.setDisconnectOnMove = function(value)
Specifies if edges should be disconnected when moved.
mxGraph.prototype.setDropEnabled = function(value)
Specifies if the graph should allow dropping of cells onto or into other cells.
mxGraph.prototype.isSplitEnabled = function()
Returns splitEnabled as a boolean.
mxGraph.prototype.setSplitEnabled = function(value)
Specifies if the graph should allow dropping of cells onto or into other cells.
mxGraph.prototype.isCellsResizable = function()
Returns cellsResizable.
mxGraph.prototype.setCellsResizable = function(value)
Specifies if the graph should allow resizing of cells.
mxGraph.prototype.isTerminalPointMovable = function(cell,
source)
Returns true if the given terminal point is movable.
mxGraph.prototype.isCellBendable = function(cell)
Returns true if the given cell is bendable.
mxGraph.prototype.setCellsBendable = function(value)
Specifies if the graph should allow bending of edges.
mxGraph.prototype.isCellsEditable = function()
Returns cellsEditable.
mxGraph.prototype.setCellsEditable = function(value)
Specifies if the graph should allow in-place editing for cell labels.
mxGraph.prototype.isCellDisconnectable = function(cell,
terminal,
source)
Returns true if the given cell is disconnectable from the source or target terminal.
mxGraph.prototype.isCellsDisconnectable = function()
Returns cellsDisconnectable.
mxGraph.prototype.setCellsDisconnectable = function(value)
Sets cellsDisconnectable.
mxGraph.prototype.isValidSource = function(cell)
Returns true if the given cell is a valid source for new connections.
mxGraph.prototype.isValidTarget = function(cell)
Returns isValidSource for the given cell.
mxGraph.prototype.isValidConnection = function(source,
target)
Returns true if the given target cell is a valid target for source.
mxGraph.prototype.setConnectable = function(connectable)
Specifies if the graph should allow new connections.
mxGraph.prototype.isConnectable = function()
Returns true if the connectionHandler is enabled.
mxGraph.prototype.setTooltips = function (enabled)
Specifies if tooltips should be enabled.
mxGraph.prototype.setPanning = function(enabled)
Specifies if panning should be enabled.
mxGraph.prototype.isEditing = function(cell)
Returns true if the given cell is currently being edited.
mxGraph.prototype.isAutoSizeCell = function(cell)
Returns true if the size of the given cell should automatically be updated after a change of the label.
mxGraph.prototype.isAutoSizeCells = function()
Returns autoSizeCells.
mxGraph.prototype.setAutoSizeCells = function(value)
Specifies if cell sizes should be automatically updated after a label change.
mxGraph.prototype.isExtendParent = function(cell)
Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
mxGraph.prototype.isExtendParents = function()
Returns extendParents.
mxGraph.prototype.setExtendParents = function(value)
Sets extendParents.
mxGraph.prototype.isExtendParentsOnAdd = function(cell)
Returns extendParentsOnAdd.
mxGraph.prototype.setExtendParentsOnAdd = function(value)
Sets extendParentsOnAdd.
mxGraph.prototype.isExtendParentsOnMove = function()
Returns extendParentsOnMove.
mxGraph.prototype.setExtendParentsOnMove = function(value)
Sets extendParentsOnMove.
mxGraph.prototype.setRecursiveResize = function(value)
Sets recursiveResize.
mxGraph.prototype.isConstrainChildren = function()
Returns constrainChildren.
mxGraph.prototype.setConstrainChildren = function(value)
Sets constrainChildren.
mxGraph.prototype.isConstrainRelativeChildren = function()
Returns constrainRelativeChildren.
mxGraph.prototype.setConstrainRelativeChildren = function(value)
Sets constrainRelativeChildren.
mxGraph.prototype.getFoldableCells = function(cells,
collapse)
Returns the cells which are movable in the given array of cells.
mxGraph.prototype.isCellFoldable = function(cell,
collapse)
Returns true if the given cell is foldable.
mxGraph.prototype.isValidDropTarget = function(cell,
cells,
evt)
Returns true if the given cell is a valid drop target for the specified cells.
mxGraph.prototype.isSplitTarget = function(target,
cells,
evt)
Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
mxGraph.prototype.getDropTarget = function(cells,
evt,
cell,
clone)
Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
mxGraph.prototype.getDefaultParent = function()
Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
mxGraph.prototype.setDefaultParent = function(cell)
Sets the defaultParent to the given cell.
mxGraph.prototype.getSwimlane = function(cell)
Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
mxGraph.prototype.getSwimlaneAt = function (x,
y,
parent)
Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
mxGraph.prototype.getCellAt = function(x,
y,
parent,
vertices,
edges,
ignoreFn)
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
mxGraph.prototype.intersects = function(state,
x,
y)
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
mxGraph.prototype.hitsSwimlaneContent = function(swimlane,
x,
y)
Returns true if the given coordinate pair is inside the content are of the given swimlane.
mxGraph.prototype.getChildVertices = function(parent)
Returns the visible child vertices of the given parent.
mxGraph.prototype.getChildEdges = function(parent)
Returns the visible child edges of the given parent.
mxGraph.prototype.getChildCells = function(parent,
vertices,
edges)
Returns the visible child vertices or edges in the given parent.
mxGraph.prototype.getConnections = function(cell,
parent)
Returns all visible edges connected to the given cell without loops.
mxGraph.prototype.getIncomingEdges = function(cell,
parent)
Returns the visible incoming edges for the given cell.
mxGraph.prototype.getOutgoingEdges = function(cell,
parent)
Returns the visible outgoing edges for the given cell.
mxGraph.prototype.getEdges = function(cell,
parent,
incoming,
outgoing,
includeLoops,
recurse)
Returns the incoming and/or outgoing edges for the given cell.
mxGraph.prototype.isValidAncestor = function(cell,
parent,
recurse)
Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
mxGraph.prototype.getOpposites = function(edges,
terminal,
sources,
targets)
Returns all distinct visible opposite cells for the specified terminal on the given edges.
mxGraph.prototype.getEdgesBetween = function(source,
target,
directed)
Returns the edges between the given source and target.
mxGraph.prototype.getPointForEvent = function(evt,
addOffset)
Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of container and applies the grid.
mxGraph.prototype.getCells = function(x,
y,
width,
height,
parent,
result)
Returns the child vertices and edges of the given parent that are contained in the given rectangle.
mxGraph.prototype.getCellsBeyond = function(x0,
y0,
parent,
rightHalfpane,
bottomHalfpane)
Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
mxGraph.prototype.findTreeRoots = function(parent,
isolate,
invert)
Returns all children in the given parent which do not have incoming edges.
mxGraph.prototype.traverse = function(vertex,
directed,
func,
edge,
visited,
inverse)
Traverses the (directed) graph invoking the given function for each visited vertex and edge.
mxGraph.prototype.isCellSelected = function(cell)
Returns true if the given cell is selected.
mxGraph.prototype.isSelectionEmpty = function()
Returns true if the selection is empty.
mxGraph.prototype.clearSelection = function()
Clears the selection using mxGraphSelectionModel.clear.
mxGraph.prototype.getSelectionCount = function()
Returns the number of selected cells.
mxGraph.prototype.getSelectionCell = function()
Returns the first cell from the array of selected mxCells.
mxGraph.prototype.getSelectionCells = function()
Returns the array of selected mxCells.
mxGraph.prototype.setSelectionCell = function(cell)
Sets the selection cell.
mxGraph.prototype.setSelectionCells = function(cells)
Sets the selection cell.
mxGraph.prototype.addSelectionCell = function(cell)
Adds the given cell to the selection.
mxGraph.prototype.addSelectionCells = function(cells)
Adds the given cells to the selection.
mxGraph.prototype.removeSelectionCell = function(cell)
Removes the given cell from the selection.
mxGraph.prototype.removeSelectionCells = function(cells)
Removes the given cells from the selection.
mxGraph.prototype.selectRegion = function(rect,
evt)
Selects and returns the cells inside the given rectangle for the specified event.
mxGraph.prototype.selectNextCell = function()
Selects the next cell.
mxGraph.prototype.selectPreviousCell = function()
Selects the previous cell.
mxGraph.prototype.selectParentCell = function()
Selects the parent cell.
mxGraph.prototype.selectChildCell = function()
Selects the first child cell.
mxGraph.prototype.selectCell = function(isNext,
isParent,
isChild)
Selects the next, parent, first child or previous cell, if all arguments are false.
mxGraph.prototype.selectAll = function(parent,
descendants)
Selects all children of the given parent cell or the children of the default parent if no parent is specified.
mxGraph.prototype.selectVertices = function(parent)
Select all vertices inside the given parent or the default parent.
mxGraph.prototype.selectCells = function(vertices,
edges,
parent)
Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
mxGraph.prototype.selectCellForEvent = function(cell,
evt)
Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
mxGraph.prototype.selectCellsForEvent = function(cells,
evt)
Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
mxGraph.prototype.createHandler = function(state)
Creates a new handler for the given cell state.
mxGraph.prototype.createVertexHandler = function(state)
Hooks to create a new mxVertexHandler for the given mxCellState.
Event handler for resizing cells.
mxGraph.prototype.createEdgeHandler = function(state,
edgeStyle)
Hooks to create a new mxEdgeHandler for the given mxCellState.
Graph event handler that reconnects edges and modifies control points and the edge label location.
mxGraph.prototype.createEdgeSegmentHandler = function(state)
Hooks to create a new mxEdgeSegmentHandler for the given mxCellState.
mxGraph.prototype.createElbowEdgeHandler = function(state)
Hooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph event handler that reconnects edges and modifies control points and the edge label location.
mxGraph.prototype.addMouseListener = function(listener)
Adds a listener to the graph event dispatch loop.
mxGraph.prototype.removeMouseListener = function(listener)
Removes the specified graph listener.
mxGraph.prototype.updateMouseEvent = function(me,
evtName)
Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
mxGraph.prototype.isEventIgnored = function(evtName,
me,
sender)
Returns true if the event should be ignored in fireMouseEvent.
mxGraph.prototype.isSyntheticEventIgnored = function(evtName,
me,
sender)
Hook for ignoring synthetic mouse events after touchend in Firefox.
mxGraph.prototype.isEventSourceIgnored = function(evtName,
me)
Returns true if the event should be ignored in fireMouseEvent.
mxGraph.prototype.getEventState = function(state)
Returns the mxCellState to be used when firing the mouse event for the given state.
mxGraph.prototype.consumeMouseEvent = function(evtName,
me,
sender)
Consumes the given mxMouseEvent if it’s a touchStart event.
Fires in fireGestureEvent after a touch gesture.
mxGraph.prototype.destroy = function()
Destroys the graph and all its resources.
function mxCellOverlay(image,
tooltip,
align,
verticalAlign,
offset,
cursor)
Constructs a new overlay using the given image and tooltip.
mxCellOverlay.prototype.image
Holds the mxImage to be used as the icon.
mxCellOverlay.prototype.tooltip
Holds the optional string to be used as the tooltip.
mxCellOverlay.prototype.align
Holds the horizontal alignment for the overlay.
mxCellOverlay.prototype.verticalAlign
Holds the vertical alignment for the overlay.
mxCellOverlay.prototype.offset
Holds the offset as an mxPoint.
mxCellOverlay.prototype.cursor
Holds the cursor for the overlay.
mxCellOverlay.prototype.defaultOverlap
Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
mxCellOverlay.prototype.getBounds = function(state)
Returns the bounds of the overlay for the given mxCellState as an mxRectangle.
mxCellOverlay.prototype.toString = function()
Returns the textual representation of the overlay to be used as the tooltip.
function mxOutline(source,
container)
Constructs a new outline for the specified graph inside the given container.
mxOutline.prototype.enabled
Specifies if events are handled.
mxOutline.prototype.showViewport
Specifies a viewport rectangle should be shown.
mxOutline.prototype.border
Border to be added at the bottom and right.
mxOutline.prototype.labelsVisible
Specifies if labels should be visible in the outline.
mxOutline.prototype.updateOnPan
Specifies if update should be called for mxEvent.PAN in the source graph.
mxOutline.prototype.update = function(revalidate)
Updates the outline.
Specifies the event name for pan.
mxOutline.prototype.sizerImage
Optional mxImage to be used for the sizer.
mxOutline.prototype.minScale
Minimum scale to be used.
mxOutline.prototype.suspended
Optional boolean flag to suspend updates.
mxOutline.prototype.forceVmlHandles
Specifies if VML should be used to render the handles in this control.
mxOutline.prototype.createGraph = function(container)
Creates the mxGraph used in the outline.
mxOutline.prototype.init = function(container)
Initializes the outline inside the given container.
mxOutline.prototype.isEnabled = function()
Returns true if events are handled.
mxOutline.prototype.setEnabled = function(value)
Enables or disables event handling.
mxOutline.prototype.setZoomEnabled = function(value)
Enables or disables the zoom handling by showing or hiding the respective handle.
mxOutline.prototype.refresh = function()
Invokes update and revalidate the outline.
mxOutline.prototype.createSizer = function()
Creates the shape used as the sizer.
mxOutline.prototype.getSourceContainerSize = function()
Returns the size of the source container.
mxOutline.prototype.getOutlineOffset = function(scale)
Returns the offset for drawing the outline graph.
mxOutline.prototype.mouseDown = function(sender,
me)
Handles the event by starting a translation or zoom.
mxOutline.prototype.mouseMove = function(sender,
me)
Handles the event by previewing the viewrect in graph and updating the rectangle that represents the viewrect in the outline.
mxOutline.prototype.getTranslateForEvent = function(me)
Gets the translate for the given mouse event.
mxOutline.prototype.mouseUp = function(sender,
me)
Handles the event by applying the translation or zoom to graph.
mxOutline.prototype.destroy = function()
Destroy this outline and removes all listeners from source.
Reference to the source mxGraph.
function mxMultiplicity(source,
type,
attr,
value,
min,
max,
validNeighbors,
countError,
typeError,
validNeighborsAllowed)
Instantiate class mxMultiplicity in order to describe allowed connections in a graph.
mxMultiplicity.prototype.type
Defines the type of the source or target terminal.
mxMultiplicity.prototype.attr
Optional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.
mxMultiplicity.prototype.value
Optional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.
mxMultiplicity.prototype.source
Boolean that specifies if the rule is applied to the source or target terminal of an edge.
mxMultiplicity.prototype.min
Defines the minimum number of connections for which this rule applies.
mxMultiplicity.prototype.max
Defines the maximum number of connections for which this rule applies.
mxMultiplicity.prototype.validNeighbors
Holds an array of strings that specify the type of neighbor for which this rule applies.
mxMultiplicity.prototype.validNeighborsAllowed
Boolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.
mxMultiplicity.prototype.countError
Holds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.
mxMultiplicity.prototype.typeError
Holds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.
mxMultiplicity.prototype.check = function(graph,
edge,
source,
target,
sourceOut,
targetIn)
Checks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.
mxMultiplicity.prototype.checkNeighbors = function(graph,
edge,
source,
target)
Checks if there are any valid neighbours in validNeighbors.
mxMultiplicity.prototype.checkTerminal = function(graph,
terminal,
edge)
Checks the given terminal cell and returns true if this rule applies.
mxMultiplicity.prototype.checkType = function(graph,
value,
type,
attr,
attrValue)
Checks the type of the given value.
mxLayoutManager.prototype.layoutCells = function(cells)
Executes all layouts which have been scheduled during the changes.
function mxLayoutManager(graph)
Constructs a new automatic layout for the given graph.
mxLayoutManager.prototype.graph
Reference to the enclosing mxGraph.
mxLayoutManager.prototype.bubbling
Specifies if the layout should bubble along the cell hierarchy.
mxLayoutManager.prototype.enabled
Specifies if event handling is enabled.
mxLayoutManager.prototype.updateHandler
Holds the function that handles the endUpdate event.
mxLayoutManager.prototype.moveHandler
Holds the function that handles the move event.
mxLayoutManager.prototype.isEnabled = function()
Returns true if events are handled.
mxLayoutManager.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxLayoutManager.prototype.isBubbling = function()
Returns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed.
mxLayoutManager.prototype.setBubbling = function(value)
Sets bubbling.
mxLayoutManager.prototype.getGraph = function()
Returns the graph that this layout operates on.
mxLayoutManager.prototype.setGraph = function(graph)
Sets the graph that the layouts operate on.
mxLayoutManager.prototype.getLayout = function(parent)
Returns the layout to be executed for the given graph and parent.
mxLayoutManager.prototype.beforeUndo = function(undoableEdit)
Called from the undoHandler.
mxLayoutManager.prototype.executeLayoutForCells = function(cells)
Executes the given layout on the given parent.
mxLayoutManager.prototype.cellsMoved = function(cells,
evt)
Called from the moveHandler.
mxLayoutManager.prototype.getCellsForChange = function(change)
Executes all layouts which have been scheduled during the changes.
mxLayoutManager.prototype.destroy = function()
Removes all handlers from the graph and deletes the reference to it.
function mxSwimlaneManager(graph,
horizontal,
addEnabled,
resizeEnabled)
Constructs a new swimlane manager for the given graph.
mxSwimlaneManager.prototype.graph
Reference to the enclosing mxGraph.
mxSwimlaneManager.prototype.enabled
Specifies if event handling is enabled.
mxSwimlaneManager.prototype.horizontal
Specifies the orientation of the swimlanes.
mxSwimlaneManager.prototype.addEnabled
Specifies if newly added cells should be resized to match the size of their existing siblings.
mxSwimlaneManager.prototype.resizeEnabled
Specifies if resizing of swimlanes should be handled.
mxSwimlaneManager.prototype.isEnabled = function()
Returns true if events are handled.
mxSwimlaneManager.prototype.setEnabled = function(value)
Enables or disables event handling.
mxSwimlaneManager.prototype.isHorizontal = function()
Returns horizontal.
mxSwimlaneManager.prototype.setHorizontal = function(value)
Sets horizontal.
mxSwimlaneManager.prototype.isAddEnabled = function()
Returns addEnabled.
mxSwimlaneManager.prototype.setAddEnabled = function(value)
Sets addEnabled.
mxSwimlaneManager.prototype.isResizeEnabled = function()
Returns resizeEnabled.
mxSwimlaneManager.prototype.setResizeEnabled = function(value)
Sets resizeEnabled.
mxSwimlaneManager.prototype.getGraph = function()
Returns the graph that this manager operates on.
mxSwimlaneManager.prototype.setGraph = function(graph)
Sets the graph that the manager operates on.
mxSwimlaneManager.prototype.isSwimlaneIgnored = function(swimlane)
Returns true if the given swimlane should be ignored.
mxSwimlaneManager.prototype.isCellHorizontal = function(cell)
Returns true if the given cell is horizontal.
mxSwimlaneManager.prototype.cellsAdded = function(cells)
Called if any cells have been added.
mxSwimlaneManager.prototype.swimlaneAdded = function(swimlane)
Updates the size of the given swimlane to match that of any existing siblings swimlanes.
mxSwimlaneManager.prototype.cellsResized = function(cells)
Called if any cells have been resizes.
mxSwimlaneManager.prototype.resizeSwimlane = function(swimlane,
w,
h,
parentHorizontal)
Called from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if bubbling is true.
mxSwimlaneManager.prototype.destroy = function()
Removes all handlers from the graph and deletes the reference to it.
mxTemporaryCellStates.prototype.view
Holds the width of the rectangle.
mxTemporaryCellStates.prototype.oldStates
Holds the height of the rectangle.
mxTemporaryCellStates.prototype.oldBounds
Holds the height of the rectangle.
mxTemporaryCellStates.prototype.oldScale
Holds the height of the rectangle.
mxTemporaryCellStates.prototype.destroy = function()
Returns the top, left corner as a new mxPoint.
function mxCellStatePreview(graph)
Constructs a move preview for the given graph.
mxCellStatePreview.prototype.graph
Reference to the enclosing mxGraph.
mxCellStatePreview.prototype.deltas
Reference to the enclosing mxGraph.
mxCellStatePreview.prototype.count
Contains the number of entries in the map.
mxCellStatePreview.prototype.isEmpty = function()
Returns true if this contains no entries.
mxCellStatePreview.prototype.show = function(visitor)
mxCellStatePreview.prototype.translateState = function(state,
dx,
dy)
mxCellStatePreview.prototype.revalidateState = function(state,
dx,
dy,
visitor)
mxCellStatePreview.prototype.addEdges = function(state)
function mxConnectionConstraint(point,
perimeter,
name,
dx,
dy)
Constructs a new connection constraint for the given point and boolean arguments.
mxConnectionConstraint.prototype.point
mxPoint that specifies the fixed location of the connection point.
mxConnectionConstraint.prototype.perimeter
Boolean that specifies if the point should be projected onto the perimeter of the terminal.
mxConnectionConstraint.prototype.name
Optional string that specifies the name of the constraint.
mxConnectionConstraint.prototype.dx
Optional float that specifies the horizontal offset of the constraint.
mxConnectionConstraint.prototype.dy
Optional float that specifies the vertical offset of the constraint.
function mxGraphHandler(graph)
Constructs an event handler that creates handles for the selection cells.
mxGraphHandler.prototype.graph
Reference to the enclosing mxGraph.
mxGraphHandler.prototype.maxCells
Defines the maximum number of cells to paint subhandles for.
mxGraphHandler.prototype.enabled
Specifies if events are handled.
mxGraphHandler.prototype.highlightEnabled
Specifies if drop targets under the mouse should be enabled.
mxGraphHandler.prototype.cloneEnabled
Specifies if cloning by control-drag is enabled.
mxGraphHandler.prototype.moveEnabled
Specifies if moving is enabled.
mxGraphHandler.prototype.guidesEnabled
Specifies if other cells should be used for snapping the right, center or left side of the current selection.
mxGraphHandler.prototype.guide
Holds the mxGuide instance that is used for alignment.
mxGraphHandler.prototype.currentDx
Stores the x-coordinate of the current mouse move.
mxGraphHandler.prototype.currentDy
Stores the y-coordinate of the current mouse move.
mxGraphHandler.prototype.updateCursor
Specifies if a move cursor should be shown if the mouse is over a movable cell.
mxGraphHandler.prototype.selectEnabled
Specifies if selecting is enabled.
mxGraphHandler.prototype.removeCellsFromParent
Specifies if cells may be moved out of their parents.
mxGraphHandler.prototype.removeEmptyParents
If empty parents should be removed from the model after all child cells have been moved out.
mxGraphHandler.prototype.connectOnDrop
Specifies if drop events are interpreted as new connections if no other drop action is defined.
mxGraphHandler.prototype.scrollOnMove
Specifies if the view should be scrolled so that a moved cell is visible.
mxGraphHandler.prototype.minimumSize
Specifies the minimum number of pixels for the width and height of a selection border.
mxGraphHandler.prototype.previewColor
Specifies the color of the preview shape.
mxGraphHandler.prototype.htmlPreview
Specifies if the graph container should be used for preview.
mxGraphHandler.prototype.shape
Reference to the mxShape that represents the preview.
mxGraphHandler.prototype.scaleGrid
Specifies if the grid should be scaled.
mxGraphHandler.prototype.rotationEnabled
Specifies if the bounding box should allow for rotation.
mxGraphHandler.prototype.isEnabled = function()
Returns enabled.
mxGraphHandler.prototype.setEnabled = function(value)
Sets enabled.
mxGraphHandler.prototype.isCloneEnabled = function()
Returns cloneEnabled.
mxGraphHandler.prototype.setCloneEnabled = function(value)
Sets cloneEnabled.
mxGraphHandler.prototype.isMoveEnabled = function()
Returns moveEnabled.
mxGraphHandler.prototype.setMoveEnabled = function(value)
Sets moveEnabled.
mxGraphHandler.prototype.isSelectEnabled = function()
Returns selectEnabled.
mxGraphHandler.prototype.setSelectEnabled = function(value)
Sets selectEnabled.
mxGraphHandler.prototype.isRemoveCellsFromParent = function()
Returns removeCellsFromParent.
mxGraphHandler.prototype.setRemoveCellsFromParent = function(value)
Sets removeCellsFromParent.
mxGraphHandler.prototype.getInitialCellForEvent = function(me)
Hook to return initial cell for the given event.
mxGraphHandler.prototype.isDelayedSelection = function(cell,
me)
Hook to return true for delayed selections.
mxGraphHandler.prototype.consumeMouseEvent = function(evtName,
me)
Consumes the given mouse event.
mxGraphHandler.prototype.mouseDown = function(sender,
me)
Handles the event by selecing the given cell and creating a handle for it.
mxGraphHandler.prototype.getGuideStates = function()
Creates an array of cell states which should be used as guides.
mxGraphHandler.prototype.getCells = function(initialCell)
Returns the cells to be modified by this handler.
mxGraphHandler.prototype.getPreviewBounds = function(cells)
Returns the mxRectangle used as the preview bounds for moving the given cells.
mxGraphHandler.prototype.getBoundingBox = function(cells)
Returns the union of the mxCellStates for the given array of mxCells.
mxGraphHandler.prototype.createPreviewShape = function(bounds)
Creates the shape used to draw the preview for the given bounds.
mxGraphHandler.prototype.start = function(cell,
x,
y)
Starts the handling of the mouse gesture.
mxGraphHandler.prototype.useGuidesForEvent = function(me)
Returns true if the guides should be used for the given mxMouseEvent.
mxGraphHandler.prototype.snap = function(vector)
Snaps the given vector to the grid and returns the given mxPoint instance.
mxGraphHandler.prototype.getDelta = function(me)
Returns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.
mxGraphHandler.prototype.updateHint = function(me)
Hook for subclassers do show details while the handler is active.
mxGraphHandler.prototype.removeHint = function()
Hooks for subclassers to hide details when the handler gets inactive.
mxGraphHandler.prototype.roundLength = function(length)
Hook for rounding the unscaled vector.
mxGraphHandler.prototype.mouseMove = function(sender,
me)
Handles the event by highlighting possible drop targets and updating the preview.
mxGraphHandler.prototype.updatePreviewShape = function()
Updates the bounds of the preview shape.
mxGraphHandler.prototype.setHighlightColor = function(color)
Sets the color of the rectangle used to highlight drop targets.
mxGraphHandler.prototype.mouseUp = function(sender,
me)
Handles the event by applying the changes to the selection cells.
mxGraphHandler.prototype.selectDelayed = function(me)
Implements the delayed selection for the given mouse event.
mxGraphHandler.prototype.reset = function()
Resets the state of this handler.
mxGraphHandler.prototype.shouldRemoveCellsFromParent = function(parent,
cells,
evt)
Returns true if the given cells should be removed from the parent for the specified mousereleased event.
mxGraphHandler.prototype.moveCells = function(cells,
dx,
dy,
clone,
target,
evt)
Moves the given cells by the specified amount.
mxGraphHandler.prototype.destroyShapes = function()
Destroy the preview and highlight shapes.
mxGraphHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
Basic popup menu.
mxPanningHandler.prototype.graph
Reference to the enclosing mxGraph.
mxPanningHandler.prototype.useLeftButtonForPanning
Specifies if panning should be active for the left mouse button.
mxPanningHandler.prototype.usePopupTrigger
Specifies if mxEvent.isPopupTrigger should also be used for panning.
mxPanningHandler.prototype.ignoreCell
Specifies if panning should be active even if there is a cell under the mousepointer.
mxPanningHandler.prototype.previewEnabled
Specifies if the panning should be previewed.
mxPanningHandler.prototype.useGrid
Specifies if the panning steps should be aligned to the grid size.
mxPanningHandler.prototype.panningEnabled
Specifies if panning should be enabled.
mxPanningHandler.prototype.pinchEnabled
Specifies if pinch gestures should be handled as zoom.
mxPanningHandler.prototype.maxScale
Specifies the maximum scale.
mxPanningHandler.prototype.minScale
Specifies the minimum scale.
mxPanningHandler.prototype.dx
Holds the current horizontal offset.
mxPanningHandler.prototype.dy
Holds the current vertical offset.
mxPanningHandler.prototype.startX
Holds the x-coordinate of the start point.
mxPanningHandler.prototype.startY
Holds the y-coordinate of the start point.
mxPanningHandler.prototype.isActive = function()
Returns true if the handler is currently active.
mxPanningHandler.prototype.isPanningEnabled = function()
Returns panningEnabled.
mxPanningHandler.prototype.setPanningEnabled = function(value)
Sets panningEnabled.
mxPanningHandler.prototype.isPinchEnabled = function()
Returns pinchEnabled.
mxPanningHandler.prototype.setPinchEnabled = function(value)
Sets pinchEnabled.
mxPanningHandler.prototype.isPanningTrigger = function(me)
Returns true if the given event is a panning trigger for the optional given cell.
mxPanningHandler.prototype.isForcePanningEvent = function(me)
Returns true if the given mxMouseEvent should start panning.
mxPanningHandler.prototype.mouseDown = function(sender,
me)
Handles the event by initiating the panning.
mxPanningHandler.prototype.start = function(me)
Starts panning at the given event.
mxPanningHandler.prototype.consumePanningTrigger = function(me)
Consumes the given mxMouseEvent if it was a panning trigger in mouseDown.
mxPanningHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the panning on the graph.
mxPanningHandler.prototype.mouseUp = function(sender,
me)
Handles the event by setting the translation on the view or showing the popupmenu.
mxPanningHandler.prototype.panGraph = function(dx,
dy)
Pans graph by the given amount.
mxPanningHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxPopupMenuHandler(graph,
factoryMethod)
Constructs an event handler that creates a mxPopupMenu.
mxPopupMenuHandler.prototype.graph
Reference to the enclosing mxGraph.
mxPopupMenuHandler.prototype.selectOnPopup
Specifies if cells should be selected if a popupmenu is displayed for them.
mxPopupMenuHandler.prototype.clearSelectionOnBackground
Specifies if cells should be deselected if a popupmenu is displayed for the diagram background.
mxPopupMenuHandler.prototype.triggerX
X-coordinate of the mouse down event.
mxPopupMenuHandler.prototype.triggerY
Y-coordinate of the mouse down event.
mxPopupMenuHandler.prototype.screenX
Screen X-coordinate of the mouse down event.
mxPopupMenuHandler.prototype.screenY
Screen Y-coordinate of the mouse down event.
mxPopupMenuHandler.prototype.init = function()
Initializes the shapes required for this vertex handler.
mxPopupMenuHandler.prototype.isSelectOnPopup = function(me)
Hook for returning if a cell should be selected for a given mxMouseEvent.
mxPopupMenuHandler.prototype.mouseDown = function(sender,
me)
Handles the event by initiating the panning.
mxPopupMenuHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the panning on the graph.
mxPopupMenuHandler.prototype.mouseUp = function(sender,
me)
Handles the event by setting the translation on the view or showing the popupmenu.
mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me)
Hook to return the cell for the mouse up popup trigger handling.
mxPopupMenuHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxCellMarker(graph,
validColor,
invalidColor,
hotspot)
Constructs a new cell marker.
mxCellMarker.prototype.graph
Reference to the enclosing mxGraph.
mxCellMarker.prototype.enabled
Specifies if the marker is enabled.
mxCellMarker.prototype.hotspot
Specifies the portion of the width and height that should trigger a highlight.
mxCellMarker.prototype.hotspotEnabled
Specifies if the hotspot is enabled.
mxCellMarker.prototype.validColor
Holds the valid marker color.
mxCellMarker.prototype.invalidColor
Holds the invalid marker color.
mxCellMarker.prototype.currentColor
Holds the current marker color.
mxCellMarker.prototype.validState
Holds the marked mxCellState if it is valid.
mxCellMarker.prototype.markedState
Holds the marked mxCellState.
mxCellMarker.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxCellMarker.prototype.isEnabled = function()
Returns true if events are handled.
mxCellMarker.prototype.setHotspot = function(hotspot)
Sets the hotspot.
mxCellMarker.prototype.getHotspot = function()
Returns the hotspot.
mxCellMarker.prototype.setHotspotEnabled = function(enabled)
Specifies whether the hotspot should be used in intersects.
mxCellMarker.prototype.intersects = function(state,
me)
Returns true if the given coordinate pair intersects the given state.
mxCellMarker.prototype.isHotspotEnabled = function()
Returns true if hotspot is used in intersects.
mxCellMarker.prototype.hasValidState = function()
Returns true if validState is not null.
mxCellMarker.prototype.getValidState = function()
Returns the validState.
mxCellMarker.prototype.getMarkedState = function()
Returns the markedState.
mxCellMarker.prototype.reset = function()
Resets the state of the cell marker.
mxCellMarker.prototype.process = function(me)
Processes the given event and cell and marks the state returned by getState with the color returned by getMarkerColor.
mxCellMarker.prototype.getState = function(me)
Uses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.
mxCellMarker.prototype.getMarkerColor = function(evt,
state,
isValid)
Returns the valid- or invalidColor depending on the value of isValid.
mxCellMarker.prototype.setCurrentState = function(state,
me,
color)
Sets and marks the current valid state.
mxCellMarker.prototype.markCell = function(cell,
color)
Marks the given cell using the given color, or validColor if no color is specified.
mxCellMarker.prototype.mark = function()
Marks the markedState and fires a mark event.
mxCellMarker.prototype.unmark = function()
Hides the marker and fires a mark event.
mxCellMarker.prototype.isValidState = function(state)
Returns true if the given mxCellState is a valid state.
mxCellMarker.prototype.getCell = function(me)
Returns the mxCell for the given event and cell.
mxCellMarker.prototype.getStateToMark = function(state)
Returns the mxCellState to be marked for the given mxCellState under the mouse.
mxCellMarker.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
mxSelectionCellsHandler.prototype.graph
Reference to the enclosing mxGraph.
mxSelectionCellsHandler.prototype.enabled
Specifies if events are handled.
mxSelectionCellsHandler.prototype.refreshHandler
Keeps a reference to an event listener for later removal.
mxSelectionCellsHandler.prototype.maxHandlers
Defines the maximum number of handlers to paint individually.
mxSelectionCellsHandler.prototype.handlers
mxDictionary that maps from cells to handlers.
mxSelectionCellsHandler.prototype.isEnabled = function()
Returns enabled.
mxSelectionCellsHandler.prototype.setEnabled = function(value)
Sets enabled.
mxSelectionCellsHandler.prototype.getHandler = function(cell)
Returns the handler for the given cell.
mxSelectionCellsHandler.prototype.reset = function()
Resets all handlers.
mxSelectionCellsHandler.prototype.refresh = function()
Reloads or updates all handlers.
mxSelectionCellsHandler.prototype.isHandlerActive = function(handler)
Returns true if the given handler is active and should not be redrawn.
mxSelectionCellsHandler.prototype.updateHandler = function(state)
Updates the handler for the given shape if one exists.
mxSelectionCellsHandler.prototype.mouseDown = function(sender,
me)
Redirects the given event to the handlers.
mxSelectionCellsHandler.prototype.mouseMove = function(sender,
me)
Redirects the given event to the handlers.
mxSelectionCellsHandler.prototype.mouseUp = function(sender,
me)
Redirects the given event to the handlers.
mxSelectionCellsHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
mxConnectionHandler.prototype.connect = function(source,
target,
evt,
dropTarget)
Connects the given source and target using a new edge.
mxConnectionHandler.prototype.reset = function()
Resets the state of this handler.
function mxConnectionHandler(graph,
factoryMethod)
Constructs an event handler that connects vertices using the specified factory method to create the new edges.
mxConnectionHandler.prototype.graph
Reference to the enclosing mxGraph.
mxConnectionHandler.prototype.factoryMethod
Function that is used for creating new edges.
mxConnectionHandler.prototype.moveIconFront
Specifies if icons should be displayed inside the graph container instead of the overlay pane.
mxConnectionHandler.prototype.moveIconBack
Specifies if icons should be moved to the back of the overlay pane.
mxConnectionHandler.prototype.connectImage
mxImage that is used to trigger the creation of a new connection.
mxConnectionHandler.prototype.targetConnectImage
Specifies if the connect icon should be centered on the target state while connections are being previewed.
mxConnectionHandler.prototype.enabled
Specifies if events are handled.
mxConnectionHandler.prototype.select
Specifies if new edges should be selected.
mxConnectionHandler.prototype.createTarget
Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.
mxConnectionHandler.prototype.createTargetVertex = function(evt,
source)
Hook method for creating new vertices on the fly if no target was under the mouse.
mxConnectionHandler.prototype.marker
Holds the mxTerminalMarker used for finding source and target cells.
mxConnectionHandler.prototype.constraintHandler
Holds the mxConstraintHandler used for drawing and highlighting constraints.
Handles constraints on connection targets.
mxConnectionHandler.prototype.error
Holds the current validation error while connections are being created.
mxConnectionHandler.prototype.waypointsEnabled
Specifies if single clicks should add waypoints on the new edge.
mxConnectionHandler.prototype.ignoreMouseDown
Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.
mxConnectionHandler.prototype.first
Holds the mxPoint where the mouseDown took place while the handler is active.
mxConnectionHandler.prototype.connectIconOffset
Holds the offset for connect icons during connection preview.
mxConnectionHandler.prototype.edgeState
Optional mxCellState that represents the preview edge while the handler is active.
mxConnectionHandler.prototype.changeHandler
Holds the change event listener for later removal.
mxConnectionHandler.prototype.drillHandler
Holds the drill event listener for later removal.
mxConnectionHandler.prototype.mouseDownCounter
Counts the number of mouseDown events since the start.
mxConnectionHandler.prototype.movePreviewAway
Switch to enable moving the preview away from the mousepointer.
mxConnectionHandler.prototype.outlineConnect
Specifies if connections to the outline of a highlighted target should be enabled.
mxConnectionHandler.prototype.livePreview
Specifies if the actual shape of the edge state should be used for the preview.
mxConnectionHandler.prototype.cursor
Specifies the cursor to be used while the handler is active.
mxConnectionHandler.prototype.insertBeforeSource
Specifies if new edges should be inserted before the source vertex in the cell hierarchy.
mxConnectionHandler.prototype.isEnabled = function()
Returns true if events are handled.
mxConnectionHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxConnectionHandler.prototype.isInsertBefore = function(edge,
source,
target,
evt,
dropTarget)
Returns insertBeforeSource for non-loops and false for loops.
mxConnectionHandler.prototype.isCreateTarget = function(evt)
Returns createTarget.
mxConnectionHandler.prototype.setCreateTarget = function(value)
Sets createTarget.
mxConnectionHandler.prototype.createShape = function()
Creates the preview shape for new connections.
mxConnectionHandler.prototype.init = function()
Initializes the shapes required for this connection handler.
mxConnectionHandler.prototype.isConnectableCell = function(cell)
Returns true if the given cell is connectable.
mxConnectionHandler.prototype.createMarker = function()
Creates and returns the mxCellMarker used in marker.
A helper class to process mouse locations and highlight cells.
mxConnectionHandler.prototype.start = function(state,
x,
y,
edgeState)
Starts a new connection for the given state and coordinates.
mxConnectionHandler.prototype.isConnecting = function()
Returns true if the source terminal has been clicked and a new connection is currently being previewed.
mxConnectionHandler.prototype.isValidSource = function(cell,
me)
Returns mxGraph.isValidSource for the given source terminal.
mxConnectionHandler.prototype.isValidTarget = function(cell)
Returns true.
mxConnectionHandler.prototype.validateConnection = function(source,
target)
Returns the error message or an empty string if the connection for the given source target pair is not valid.
mxConnectionHandler.prototype.getConnectImage = function(state)
Hook to return the mxImage used for the connection icon of the given mxCellState.
mxConnectionHandler.prototype.isMoveIconToFrontForState = function(state)
Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
mxConnectionHandler.prototype.createIcons = function(state)
Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
mxConnectionHandler.prototype.redrawIcons = function(icons,
state)
Redraws the given array of mxImageShapes.
mxConnectionHandler.prototype.destroyIcons = function()
Destroys the connect icons and resets the respective state.
mxConnectionHandler.prototype.isStartEvent = function(me)
Returns true if the given mouse down event should start this handler.
mxConnectionHandler.prototype.mouseDown = function(sender,
me)
Handles the event by initiating a new connection.
mxConnectionHandler.prototype.isImmediateConnectSource = function(state)
Returns true if a tap on the given source state should immediately start connecting.
mxConnectionHandler.prototype.createEdgeState = function(me)
Hook to return an mxCellState which may be used during the preview.
mxConnectionHandler.prototype.isOutlineConnectEvent = function(me)
Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
mxConnectionHandler.prototype.updateCurrentState = function(me,
point)
Updates the current state for a given mouse move event by using the marker.
mxConnectionHandler.prototype.isCellEnabled = function(cell)
Returns true if the given cell does not allow new connections to be created.
mxConnectionHandler.prototype.convertWaypoint = function(point)
Converts the given point from screen coordinates to model coordinates.
mxConnectionHandler.prototype.snapToPreview = function(me,
point)
Called to snap the given point to the current preview.
mxConnectionHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
mxConnectionHandler.prototype.updateEdgeState = function(current,
constraint)
Updates edgeState.
mxConnectionHandler.prototype.getTargetPerimeterPoint = function(state,
me)
Returns the perimeter point for the given target state.
mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state,
next,
me)
Hook to update the icon position(s) based on a mouseOver event.
mxConnectionHandler.prototype.updateIcons = function(state,
icons,
me)
Hook to update the icon position(s) based on a mouseOver event.
mxConnectionHandler.prototype.isStopEvent = function(me)
Returns true if the given mouse up event should stop this handler.
mxConnectionHandler.prototype.addWaypointForEvent = function(me)
Adds the waypoint for the given event to waypoints.
mxConnectionHandler.prototype.checkConstraints = function(c1,
c2)
Returns true if the connection for the given constraints is valid.
mxConnectionHandler.prototype.mouseUp = function(sender,
me)
Handles the event by inserting the new connection.
mxConnectionHandler.prototype.drawPreview = function()
Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
Returns the color used to draw the preview edge.
mxConnectionHandler.prototype.getEdgeWidth = function(valid)
Returns the width used to draw the preview edge.
mxConnectionHandler.prototype.selectCells = function(edge,
target)
Selects the given edge after adding a new connection.
mxConnectionHandler.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)
Creates, inserts and returns the new edge for the given parameters.
mxConnectionHandler.prototype.getAlignmentTolerance = function(evt)
Returns the tolerance for aligning new targets to sources.
mxConnectionHandler.prototype.createEdge = function(value,
source,
target,
style)
Creates and returns a new edge using factoryMethod if one exists.
mxConnectionHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxConstraintHandler(graph)
Constructs an new constraint handler.
mxConstraintHandler.prototype.pointImage
mxImage to be used as the image for fixed connection points.
mxConstraintHandler.prototype.graph
Reference to the enclosing mxGraph.
mxConstraintHandler.prototype.enabled
Specifies if events are handled.
mxConstraintHandler.prototype.highlightColor
Specifies the color for the highlight.
mxConstraintHandler.prototype.isEnabled = function()
Returns true if events are handled.
mxConstraintHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxConstraintHandler.prototype.reset = function()
Resets the state of this handler.
mxConstraintHandler.prototype.getTolerance = function(me)
Returns the tolerance to be used for intersecting connection points.
mxConstraintHandler.prototype.getImageForConstraint = function(state,
constraint,
point)
Returns the tolerance to be used for intersecting connection points.
mxConstraintHandler.prototype.isEventIgnored = function(me,
source)
Returns true if the given mxMouseEvent should be ignored in update.
mxConstraintHandler.prototype.update = function(me,
source,
existingEdge,
point)
Updates the state of this handler based on the given mxMouseEvent.
mxConstraintHandler.prototype.isStateIgnored = function(state,
source)
Returns true if the given state should be ignored.
mxConstraintHandler.prototype.destroyIcons = function()
Destroys the focusIcons if they exist.
mxConstraintHandler.prototype.destroyFocusHighlight = function()
Destroys the focusHighlight if one exists.
mxConstraintHandler.prototype.isKeepFocusEvent = function(me)
Returns true if the current focused state should not be changed for the given event.
mxConstraintHandler.prototype.getCellForEvent = function(me,
point)
Returns the cell for the given event.
mxConstraintHandler.prototype.redraw = function()
Transfers the focus to the given state as a source or target terminal.
mxConstraintHandler.prototype.setFocus = function(me,
state,
source)
Transfers the focus to the given state as a source or target terminal.
mxConstraintHandler.prototype.createHighlightShape = function()
Create the shape used to paint the highlight.
mxConstraintHandler.prototype.intersects = function(icon,
mouse,
source,
existingEdge)
Returns true if the given icon intersects the given rectangle.
mxConstraintHandler.prototype.destroy = function()
Destroy this handler.
function mxRubberband(graph)
Constructs an event handler that selects rectangular regions in the graph using rubberband selection.
mxRubberband.prototype.defaultOpacity
Specifies the default opacity to be used for the rubberband div.
mxRubberband.prototype.enabled
Specifies if events are handled.
mxRubberband.prototype.div
Holds the DIV element which is currently visible.
mxRubberband.prototype.sharedDiv
Holds the DIV element which is used to display the rubberband.
mxRubberband.prototype.currentX
Holds the value of the x argument in the last call to update.
mxRubberband.prototype.update = function(x,
y)
Sets currentX and currentY and calls repaint.
mxRubberband.prototype.currentY
Holds the value of the y argument in the last call to update.
mxRubberband.prototype.fadeOut
Optional fade out effect.
mxRubberband.prototype.isEnabled = function()
Returns true if events are handled.
mxRubberband.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxRubberband.prototype.isForceRubberbandEvent = function(me)
Returns true if the given mxMouseEvent should start rubberband selection.
mxRubberband.prototype.mouseDown = function(sender,
me)
Handles the event by initiating a rubberband selection.
mxRubberband.prototype.start = function(x,
y)
Sets the start point for the rubberband selection.
mxRubberband.prototype.mouseMove = function(sender,
me)
Handles the event by updating therubberband selection.
mxRubberband.prototype.createShape = function()
Creates the rubberband selection shape.
mxRubberband.prototype.isActive = function(sender,
me)
Returns true if this handler is active.
mxRubberband.prototype.mouseUp = function(sender,
me)
Handles the event by selecting the region of the rubberband using mxGraph.selectRegion.
mxRubberband.prototype.execute = function(evt)
Resets the state of this handler and selects the current region for the given event.
mxRubberband.prototype.reset = function()
Resets the state of the rubberband selection.
mxRubberband.prototype.repaint = function()
Computes the bounding box and updates the style of the div.
mxRubberband.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxHandle(state,
cursor,
image)
Constructs a new handle for the given state.
mxHandle.prototype.cursor
Specifies the cursor to be used for this handle.
mxHandle.prototype.image
Specifies the mxImage to be used to render the handle.
mxHandle.prototype.getPosition = function(bounds)
Hook for subclassers to return the current position of the handle.
mxHandle.prototype.setPosition = function(bounds,
pt,
me)
Hooks for subclassers to update the style in the state.
mxHandle.prototype.execute = function()
Hook for subclassers to execute the handle.
mxHandle.prototype.copyStyle = function(key)
Sets the cell style with the given name to the corresponding value in state.
mxHandle.prototype.processEvent = function(me)
Processes the given mxMouseEvent and invokes setPosition.
mxHandle.prototype.positionChanged = function()
Called after setPosition has been called in processEvent.
mxHandle.prototype.getRotation = function()
Returns the rotation defined in the style of the cell.
mxHandle.prototype.getTotalRotation = function()
Returns the rotation from the style and the rotation from the direction of the cell.
mxHandle.prototype.init = function()
Creates and initializes the shapes required for this handle.
mxHandle.prototype.createShape = function(html)
Creates and returns the shape for this handle.
mxHandle.prototype.initShape = function(html)
Initializes shape and sets its cursor.
mxHandle.prototype.redraw = function()
Renders the shape for this handle.
mxHandle.prototype.isHtmlRequired = function()
Returns true if this handle should be rendered in HTML.
mxHandle.prototype.rotatePoint = function(pt,
alpha)
Rotates the point by the given angle.
mxHandle.prototype.flipPoint = function(pt)
Flips the given point vertically and/or horizontally.
mxHandle.prototype.snapPoint = function(pt,
ignore)
Snaps the given point to the grid if ignore is false.
mxHandle.prototype.setVisible = function(visible)
Shows or hides this handle.
mxHandle.prototype.reset = function()
Resets the state of this handle by setting its visibility to true.
mxHandle.prototype.destroy = function()
Destroys this handle.
function mxVertexHandler(state)
Constructs an event handler that allows to resize vertices and groups.
mxVertexHandler.prototype.graph
Reference to the enclosing mxGraph.
mxVertexHandler.prototype.state
Reference to the mxCellState being modified.
mxVertexHandler.prototype.singleSizer
Specifies if only one sizer handle at the bottom, right corner should be used.
mxVertexHandler.prototype.index
Holds the index of the current handle.
mxVertexHandler.prototype.allowHandleBoundsCheck
Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
mxVertexHandler.prototype.tolerance
Optional tolerance for hit-detection in getHandleForEvent.
mxVertexHandler.prototype.handleImage
Optional mxImage to be used as handles.
mxVertexHandler.prototype.getHandleForEvent = function(me)
Returns the index of the handle for the given event.
mxVertexHandler.prototype.rotationEnabled
Specifies if a rotation handle should be visible.
mxVertexHandler.prototype.parentHighlightEnabled
Specifies if the parent should be highlighted if a child cell is selected.
mxVertexHandler.prototype.rotationRaster
Specifies if rotation steps should be “rasterized” depening on the distance to the handle.
mxVertexHandler.prototype.rotationCursor
Specifies the cursor for the rotation handle.
mxVertexHandler.prototype.livePreview
Specifies if resize should change the cell in-place.
mxVertexHandler.prototype.manageSizers
Specifies if sizers should be hidden and spaced if the vertex is small.
mxVertexHandler.prototype.constrainGroupByChildren
Specifies if the size of groups should be constrained by the children.
mxVertexHandler.prototype.rotationHandleVSpacing
Vertical spacing for rotation icon.
mxVertexHandler.prototype.horizontalOffset
The horizontal offset for the handles.
mxVertexHandler.prototype.verticalOffset
The horizontal offset for the handles.
mxVertexHandler.prototype.init = function()
Initializes the shapes required for this vertex handler.
mxVertexHandler.prototype.isRotationHandleVisible = function()
Returns true if the rotation handle should be showing.
mxVertexHandler.prototype.isConstrainedEvent = function(me)
Returns true if the aspect ratio if the cell should be maintained.
mxVertexHandler.prototype.isCenteredEvent = function(state,
me)
Returns true if the center of the vertex should be maintained during the resize.
mxVertexHandler.prototype.createCustomHandles = function()
Returns an array of custom handles.
mxVertexHandler.prototype.updateMinBounds = function()
Initializes the shapes required for this vertex handler.
mxVertexHandler.prototype.getSelectionBounds = function(state)
Returns the mxRectangle that defines the bounds of the selection border.
mxVertexHandler.prototype.createParentHighlightShape = function(bounds)
Creates the shape used to draw the selection border.
mxVertexHandler.prototype.createSelectionShape = function(bounds)
Creates the shape used to draw the selection border.
mxVertexHandler.prototype.getSelectionColor = function()
Returns mxConstants.VERTEX_SELECTION_COLOR.
Defines the color to be used for the selection border of vertices.
mxVertexHandler.prototype.getSelectionStrokeWidth = function()
Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
Defines the strokewidth to be used for vertex selections.
mxVertexHandler.prototype.isSelectionDashed = function()
Returns mxConstants.VERTEX_SELECTION_DASHED.
mxVertexHandler.prototype.createSizer = function(cursor,
index,
size,
fillColor)
Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
mxVertexHandler.prototype.isSizerVisible = function(index)
Returns true if the sizer for the given index is visible.
mxVertexHandler.prototype.createSizerShape = function(bounds,
index,
fillColor)
Creates the shape used for the sizer handle for the specified bounds an index.
mxVertexHandler.prototype.isCustomHandleEvent = function(me)
Returns true if the given event allows custom handles to be changed.
mxVertexHandler.prototype.mouseDown = function(sender,
me)
Handles the event if a handle has been clicked.
mxVertexHandler.prototype.isLivePreviewBorder = function()
Called if livePreview is enabled to check if a border should be painted.
mxVertexHandler.prototype.start = function(x,
y,
index)
Starts the handling of the mouse gesture.
mxVertexHandler.prototype.hideSizers = function()
Hides all sizers except.
mxVertexHandler.prototype.checkTolerance = function(me)
Checks if the coordinates for the given event are within the mxGraph.tolerance.
mxVertexHandler.prototype.updateHint = function(me)
Hook for subclassers do show details while the handler is active.
mxVertexHandler.prototype.removeHint = function()
Hooks for subclassers to hide details when the handler gets inactive.
mxVertexHandler.prototype.roundAngle = function(angle)
Hook for rounding the angle.
mxVertexHandler.prototype.roundLength = function(length)
Hook for rounding the unscaled width or height.
mxVertexHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the preview.
mxVertexHandler.prototype.rotateVertex = function(me)
Rotates the vertex.
mxVertexHandler.prototype.updateLivePreview = function(me)
Repaints the live preview.
mxVertexHandler.prototype.mouseUp = function(sender,
me)
Handles the event by applying the changes to the geometry.
mxVertexHandler.prototype.rotateClick = function()
Hook for subclassers to implement a single click on the rotation handle.
mxVertexHandler.prototype.rotateCell = function(cell,
angle,
parent)
Rotates the given cell and its children by the given angle in degrees.
mxVertexHandler.prototype.reset = function()
Resets the state of this handler.
mxVertexHandler.prototype.resizeCell = function(cell,
dx,
dy,
index,
gridEnabled,
constrained,
recurse)
Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
mxVertexHandler.prototype.moveChildren = function(cell,
dx,
dy)
Moves the children of the given cell by the given vector.
mxVertexHandler.prototype.union = function(bounds,
dx,
dy,
index,
gridEnabled,
scale,
tr,
constrained,
centered)
Returns the union of the given bounds and location for the specified handle index.
mxVertexHandler.prototype.redraw = function()
Redraws the handles and the preview.
mxVertexHandler.prototype.redrawHandles = function()
Redraws the handles.
mxVertexHandler.prototype.getRotationHandlePosition = function()
Returns an mxPoint that defines the rotation handle position.
mxVertexHandler.prototype.updateParentHighlight = function()
Updates the highlight of the parent if parentHighlightEnabled is true.
mxVertexHandler.prototype.drawPreview = function()
Redraws the preview.
mxVertexHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxEdgeHandler(state)
Constructs an edge handler for the specified mxCellState.
mxEdgeHandler.prototype.graph
Reference to the enclosing mxGraph.
mxEdgeHandler.prototype.state
Reference to the mxCellState being modified.
mxEdgeHandler.prototype.marker
Holds the mxTerminalMarker which is used for highlighting terminals.
mxEdgeHandler.prototype.constraintHandler
Holds the mxConstraintHandler used for drawing and highlighting constraints.
mxEdgeHandler.prototype.error
Holds the current validation error while a connection is being changed.
mxEdgeHandler.prototype.shape
Holds the mxShape that represents the preview edge.
mxEdgeHandler.prototype.bends
Holds the mxShapes that represent the points.
mxEdgeHandler.prototype.labelShape
Holds the mxShape that represents the label position.
mxEdgeHandler.prototype.cloneEnabled
Specifies if cloning by control-drag is enabled.
mxEdgeHandler.prototype.addEnabled
Specifies if adding bends by shift-click is enabled.
mxEdgeHandler.prototype.removeEnabled
Specifies if removing bends by shift-click is enabled.
mxEdgeHandler.prototype.dblClickRemoveEnabled
Specifies if removing bends by double click is enabled.
mxEdgeHandler.prototype.mergeRemoveEnabled
Specifies if removing bends by dropping them on other bends is enabled.
mxEdgeHandler.prototype.straightRemoveEnabled
Specifies if removing bends by creating straight segments should be enabled.
mxEdgeHandler.prototype.virtualBendsEnabled
Specifies if virtual bends should be added in the center of each segments.
mxEdgeHandler.prototype.virtualBendOpacity
Opacity to be used for virtual bends (see virtualBendsEnabled).
mxEdgeHandler.prototype.parentHighlightEnabled
Specifies if the parent should be highlighted if a child cell is selected.
mxEdgeHandler.prototype.preferHtml
Specifies if bends should be added to the graph container.
mxEdgeHandler.prototype.allowHandleBoundsCheck
Specifies if the bounds of handles should be used for hit-detection in IE Default is true.
mxEdgeHandler.prototype.snapToTerminals
Specifies if waypoints should snap to the routing centers of terminals.
mxEdgeHandler.prototype.handleImage
Optional mxImage to be used as handles.
mxEdgeHandler.prototype.tolerance
Optional tolerance for hit-detection in getHandleForEvent.
mxEdgeHandler.prototype.getHandleForEvent = function(me)
Returns the index of the handle for the given event.
mxEdgeHandler.prototype.outlineConnect
Specifies if connections to the outline of a highlighted target should be enabled.
mxEdgeHandler.prototype.manageLabelHandle
Specifies if the label handle should be moved if it intersects with another handle.
mxEdgeHandler.prototype.init = function()
Initializes the shapes required for this edge handler.
mxEdgeHandler.prototype.createCustomHandles = function()
Returns an array of custom handles.
mxEdgeHandler.prototype.isVirtualBendsEnabled = function(evt)
Returns true if virtual bends should be added.
mxEdgeHandler.prototype.isAddPointEvent = function(evt)
Returns true if the given event is a trigger to add a new point.
mxEdgeHandler.prototype.isRemovePointEvent = function(evt)
Returns true if the given event is a trigger to remove a point.
mxEdgeHandler.prototype.getSelectionPoints = function(state)
Returns the list of points that defines the selection stroke.
mxEdgeHandler.prototype.createSelectionShape = function(points)
Creates the shape used to draw the selection border.
mxEdgeHandler.prototype.getSelectionColor = function()
Returns mxConstants.EDGE_SELECTION_COLOR.
Defines the color to be used for the selection border of edges.
mxEdgeHandler.prototype.getSelectionStrokeWidth = function()
Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.
Defines the strokewidth to be used for edge selections.
mxEdgeHandler.prototype.isSelectionDashed = function()
Returns mxConstants.EDGE_SELECTION_DASHED.
mxEdgeHandler.prototype.isConnectableCell = function(cell)
Returns true if the given cell is connectable.
mxEdgeHandler.prototype.getCellAt = function(x,
y)
Creates and returns the mxCellMarker used in marker.
mxEdgeHandler.prototype.createMarker = function()
Creates and returns the mxCellMarker used in marker.
mxEdgeHandler.prototype.validateConnection = function(source,
target)
Returns the error message or an empty string if the connection for the given source, target pair is not valid.
mxEdgeHandler.prototype.createBends = function()
Creates and returns the bends used for modifying the edge.
mxEdgeHandler.prototype.createVirtualBends = function()
Creates and returns the bends used for modifying the edge.
mxEdgeHandler.prototype.isHandleEnabled = function(index)
Creates the shape used to display the given bend.
mxEdgeHandler.prototype.isHandleVisible = function(index)
Returns true if the handle at the given index is visible.
mxEdgeHandler.prototype.createHandleShape = function(index)
Creates the shape used to display the given bend.
mxEdgeHandler.prototype.createLabelHandleShape = function()
Creates the shape used to display the the label handle.
mxEdgeHandler.prototype.initBend = function(bend,
dblClick)
Helper method to initialize the given bend.
mxEdgeHandler.prototype.isAddVirtualBendEvent = function(me)
Returns true if the given event allows virtual bends to be added.
mxEdgeHandler.prototype.isCustomHandleEvent = function(me)
Returns true if the given event allows custom handles to be changed.
mxEdgeHandler.prototype.mouseDown = function(sender,
me)
Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
mxEdgeHandler.prototype.start = function(x,
y,
index)
Starts the handling of the mouse gesture.
mxEdgeHandler.prototype.clonePreviewState = function(point,
terminal)
Returns a clone of the current preview state for the given point and terminal.
mxEdgeHandler.prototype.getSnapToTerminalTolerance = function()
Returns the tolerance for the guides.
mxEdgeHandler.prototype.updateHint = function(me,
point)
Hook for subclassers do show details while the handler is active.
mxEdgeHandler.prototype.removeHint = function()
Hooks for subclassers to hide details when the handler gets inactive.
mxEdgeHandler.prototype.roundLength = function(length)
Hook for rounding the unscaled width or height.
mxEdgeHandler.prototype.isSnapToTerminalsEvent = function(me)
Returns true if snapToTerminals is true and if alt is not pressed.
mxEdgeHandler.prototype.getPointForEvent = function(me)
Returns the point for the given event.
mxEdgeHandler.prototype.getPreviewTerminalState = function(me)
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeHandler.prototype.getPreviewPoints = function(pt,
me)
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeHandler.prototype.isOutlineConnectEvent = function(me)
Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
mxEdgeHandler.prototype.updatePreviewState = function(edge,
point,
terminalState,
me,
outline)
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the preview.
mxEdgeHandler.prototype.mouseUp = function(sender,
me)
Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
mxEdgeHandler.prototype.moveLabel = function(edgeState,
x,
y)
Changes the coordinates for the label of the given edge.
mxEdgeHandler.prototype.connect = function(edge,
terminal,
isSource,
isClone,
me)
Changes the terminal or terminal point of the given edge in the graph model.
mxEdgeHandler.prototype.changePoints = function(edge,
points,
clone)
Changes the control points of the given edge in the graph model.
mxEdgeHandler.prototype.reset = function()
Resets the state of this handler.
mxEdgeHandler.prototype.setPreviewColor = function(color)
Sets the color of the preview to the given value.
mxEdgeHandler.prototype.convertPoint = function(point,
gridEnabled)
Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
mxEdgeHandler.prototype.changeTerminalPoint = function(edge,
point,
isSource,
clone)
Changes the terminal point of the given edge.
mxEdgeHandler.prototype.addPoint = function(state,
evt)
Adds a control point for the given state and event.
mxEdgeHandler.prototype.addPointAt = function(state,
x,
y)
Adds a control point at the given point.
mxEdgeHandler.prototype.removePoint = function(state,
index)
Removes the control point at the given index from the given state.
mxEdgeHandler.prototype.getHandleFillColor = function(index)
Returns the fillcolor for the handle at the given index.
mxEdgeHandler.prototype.redraw = function()
Redraws the preview, and the bends- and label control points.
mxEdgeHandler.prototype.redrawHandles = function()
Redraws the handles.
mxEdgeHandler.prototype.redrawInnerBends = function(p0,
pe)
Updates and redraws the inner bends.
mxEdgeHandler.prototype.checkLabelHandle = function(b)
Checks if the label handle intersects the given bounds and moves it if it intersects.
mxEdgeHandler.prototype.drawPreview = function()
Redraws the preview.
mxEdgeHandler.prototype.refresh = function()
Refreshes the bends of this handler.
mxEdgeHandler.prototype.destroyBends = function(bends)
Destroys all elements in bends.
mxEdgeHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
mxElbowEdgeHandler.prototype.doubleClickOrientationResource
Specifies the resource key for the tooltip to be displayed on the single control point for routed edges.
mxElbowEdgeHandler.prototype.createBends = function()
Overrides mxEdgeHandler.createBends to create custom bends.
mxElbowEdgeHandler.prototype.createVirtualBend = function(dblClickHandler)
Creates a virtual bend that supports double clicking and calls mxGraph.flipEdge.
mxElbowEdgeHandler.prototype.getCursorForBend = function()
Returns the cursor to be used for the bend.
mxElbowEdgeHandler.prototype.getTooltipForNode = function(node)
Returns the tooltip for the given node.
mxElbowEdgeHandler.prototype.convertPoint = function(point,
gridEnabled)
Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
mxElbowEdgeHandler.prototype.redrawInnerBends = function(p0,
pe)
Updates and redraws the inner bends.
mxEdgeSegmentHandler.prototype.getCurrentPoints = function()
Returns the current absolute points.
mxEdgeSegmentHandler.prototype.getPreviewPoints = function(point)
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeSegmentHandler.prototype.updatePreviewState = function(edge,
point,
terminalState,
me)
Overridden to perform optimization of the edge style result.
mxEdgeSegmentHandler.prototype.redraw = function()
Overridden to invoke refresh before the redraw.
function mxKeyHandler(graph,
target)
Constructs an event handler that executes functions bound to specific keystrokes.
mxKeyHandler.prototype.graph
Reference to the mxGraph associated with this handler.
mxKeyHandler.prototype.target
Reference to the target DOM, that is, the DOM node where the key event listeners are installed.
mxKeyHandler.prototype.normalKeys
Maps from keycodes to functions for non-pressed control keys.
mxKeyHandler.prototype.shiftKeys
Maps from keycodes to functions for pressed shift keys.
mxKeyHandler.prototype.controlKeys
Maps from keycodes to functions for pressed control keys.
mxKeyHandler.prototype.controlShiftKeys
Maps from keycodes to functions for pressed control and shift keys.
mxKeyHandler.prototype.enabled
Specifies if events are handled.
mxKeyHandler.prototype.isEnabled = function()
Returns true if events are handled.
mxKeyHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling by updating enabled.
mxKeyHandler.prototype.bindKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.bindShiftKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.bindControlKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.bindControlShiftKey = function(code,
funct)
Binds the specified keycode to the given function.
mxKeyHandler.prototype.isControlDown = function(evt)
Returns true if the control key is pressed.
mxKeyHandler.prototype.getFunction = function(evt)
Returns the function associated with the given key event or null if no function is associated with the given event.
mxKeyHandler.prototype.isGraphEvent = function(evt)
Returns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the mxGraph.container, or the mxGraph.cellEditor of the graph.
mxKeyHandler.prototype.keyDown = function(evt)
Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
mxKeyHandler.prototype.isEnabledForEvent = function(evt)
Returns true if the given event should be handled.
mxKeyHandler.prototype.isEventIgnored = function(evt)
Returns true if the given keystroke should be ignored.
mxKeyHandler.prototype.escape = function(evt)
Hook to process ESCAPE keystrokes.
mxKeyHandler.prototype.destroy = function()
Destroys the handler and all its references into the DOM.
function mxTooltipHandler(graph,
delay)
Constructs an event handler that displays tooltips with the specified delay (in milliseconds).
mxTooltipHandler.prototype.zIndex
Specifies the zIndex for the tooltip and its shadow.
mxTooltipHandler.prototype.graph
Reference to the enclosing mxGraph.
mxTooltipHandler.prototype.delay
Delay to show the tooltip in milliseconds.
mxTooltipHandler.prototype.ignoreTouchEvents
Specifies if touch and pen events should be ignored.
mxTooltipHandler.prototype.hideOnHover
Specifies if the tooltip should be hidden if the mouse is moved over the current cell.
mxTooltipHandler.prototype.destroyed
True if this handler was destroyed using destroy.
mxTooltipHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
mxTooltipHandler.prototype.enabled
Specifies if events are handled.
mxTooltipHandler.prototype.isEnabled = function()
Returns true if events are handled.
mxTooltipHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxTooltipHandler.prototype.isHideOnHover = function()
Returns hideOnHover.
mxTooltipHandler.prototype.setHideOnHover = function(value)
Sets hideOnHover.
mxTooltipHandler.prototype.init = function()
Initializes the DOM nodes required for this tooltip handler.
mxTooltipHandler.prototype.getStateForEvent = function(me)
Returns the mxCellState to be used for showing a tooltip for this event.
mxTooltipHandler.prototype.mouseDown = function(sender,
me)
Handles the event by initiating a rubberband selection.
mxTooltipHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the rubberband selection.
mxTooltipHandler.prototype.mouseUp = function(sender,
me)
Handles the event by resetting the tooltip timer or hiding the existing tooltip.
mxTooltipHandler.prototype.resetTimer = function()
Resets the timer.
mxTooltipHandler.prototype.reset = function(me,
restart,
state)
Resets and/or restarts the timer to trigger the display of the tooltip.
mxTooltipHandler.prototype.hide = function()
Hides the tooltip and resets the timer.
mxTooltipHandler.prototype.hideTooltip = function()
Hides the tooltip.
mxTooltipHandler.prototype.show = function(tip,
x,
y)
Shows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).
function mxCellTracker(graph,
color,
funct)
Constructs an event handler that highlights cells.
mxCellTracker.prototype.mouseDown = function(sender,
me)
Ignores the event.
mxCellTracker.prototype.mouseMove = function(sender,
me)
Handles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.
mxCellTracker.prototype.mouseUp = function(sender,
me)
Handles the event by reseting the highlight.
mxCellTracker.prototype.destroy = function()
Destroys the object and all its resources and DOM nodes.
function mxCellHighlight(graph,
highlightColor,
strokeWidth,
dashed)
Constructs a cell highlight.
mxCellHighlight.prototype.keepOnTop
Specifies if the highlights should appear on top of everything else in the overlay pane.
mxCellHighlight.prototype.graph
Reference to the enclosing mxGraph.
mxCellHighlight.prototype.state
Reference to the mxCellState.
mxCellHighlight.prototype.spacing
Specifies the spacing between the highlight for vertices and the vertex.
mxCellHighlight.prototype.resetHandler
Holds the handler that automatically invokes reset if the highlight should be hidden.
mxCellHighlight.prototype.setHighlightColor = function(color)
Sets the color of the rectangle used to highlight drop targets.
mxCellHighlight.prototype.drawHighlight = function()
Creates and returns the highlight shape for the given state.
mxCellHighlight.prototype.createShape = function()
Creates and returns the highlight shape for the given state.
mxCellHighlight.prototype.repaint = function()
Updates the highlight after a change of the model or view.
mxCellHighlight.prototype.hide = function()
Resets the state of the cell marker.
Marks the markedState and fires a mark event.
mxCellHighlight.prototype.isHighlightAt = function(x,
y)
Returns true if this highlight is at the given position.
mxCellHighlight.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
function mxDefaultKeyHandler(editor)
Constructs a new default key handler for the mxEditor.graph in the given mxEditor.
mxEditor.prototype.graph
Holds a mxGraph for displaying the diagram.
mxDefaultKeyHandler.prototype.editor
Reference to the enclosing mxEditor.
mxDefaultKeyHandler.prototype.handler
Holds the mxKeyHandler for key event handling.
mxDefaultKeyHandler.prototype.bindAction = function (code,
action,
control)
Binds the specified keycode to the given action in editor.
mxDefaultKeyHandler.prototype.destroy = function ()
Destroys the handler associated with this object.
function mxDefaultPopupMenu(config)
Constructs a new popupmenu-factory based on given configuration.
mxDefaultPopupMenu.prototype.imageBasePath
Base path for all icon attributes in the config.
mxDefaultPopupMenu.prototype.config
XML node used as the description of new menu items.
mxDefaultPopupMenu.prototype.createMenu = function(editor,
menu,
cell,
evt)
This function is called from mxEditor to add items to the given menu based on config.
mxDefaultPopupMenu.prototype.addItems = function(editor,
menu,
cell,
evt,
conditions,
item,
parent)
Recursively adds the given items and all of its children into the given menu.
mxDefaultPopupMenu.prototype.addAction = function(menu,
editor,
lab,
icon,
funct,
action,
cell,
parent,
iconCls,
enabled)
Helper method to bind an action to a new menu item.
mxDefaultPopupMenu.prototype.createConditions = function(editor,
cell,
evt)
Evaluates the default conditions for the given context.
function mxDefaultToolbar(container,
editor)
Constructs a new toolbar for the given container and editor.
mxDefaultToolbar.prototype.editor
Reference to the enclosing mxEditor.
mxDefaultToolbar.prototype.toolbar
Holds the internal mxToolbar.
Creates a toolbar inside a given DOM node.
mxDefaultToolbar.prototype.resetHandler
Reference to the function used to reset the toolbar.
mxDefaultToolbar.prototype.spacing
Defines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell.
mxDefaultToolbar.prototype.connectOnDrop
Specifies if elements should be connected if new cells are dropped onto connectable elements.
mxDefaultToolbar.prototype.init
Constructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar.
mxEditor.prototype.insertFunction
Specifies the function to be used for inserting new cells into the graph.
mxDefaultToolbar.prototype.addItem = function(title,
icon,
action,
pressed)
Adds a new item that executes the given action in editor.
mxDefaultToolbar.prototype.addSeparator = function(icon)
Adds a vertical separator using the optional icon.
mxDefaultToolbar.prototype.addCombo = function()
Helper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.
mxDefaultToolbar.prototype.addActionCombo = function(title)
Helper method to invoke mxToolbar.addActionCombo on toolbar using the given title and return the resulting DOM node.
mxDefaultToolbar.prototype.addActionOption = function(combo,
title,
action)
Binds the given action to a option with the specified label in the given combo.
mxDefaultToolbar.prototype.addOption = function(combo,
title,
value)
Helper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.
mxDefaultToolbar.prototype.addMode = function(title,
icon,
mode,
pressed,
funct)
Creates an item for selecting the given mode in the editor’s graph.
mxDefaultToolbar.prototype.addPrototype = function(title,
icon,
ptype,
pressed,
insert,
toggle)
Creates an item for inserting a clone of the specified prototype cell into the editor’s graph.
mxDefaultToolbar.prototype.drop = function(vertex,
evt,
target)
Handles a drop from a toolbar item to the graph.
mxDefaultToolbar.prototype.insert = function(vertex,
evt,
target)
Handles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.
mxDefaultToolbar.prototype.connect = function(vertex,
evt,
source)
Handles a drop by connecting the given vertex to the given source cell.
mxDefaultToolbar.prototype.installDropHandler = function (img,
dropHandler)
Makes the given img draggable using the given function for handling a drop event.
mxDefaultToolbar.prototype.destroy = function ()
Destroys the toolbar associated with this object and removes all installed listeners.
mxEditor.prototype.actions
Maps from actionnames to actions, which are functions taking the editor and the cell as arguments.
XML codec for JavaScript object graphs.
mxEditor.prototype.undoManager
Holds an mxUndoManager for the command history.
mxEditor.prototype.open = function (filename)
Opens the specified file synchronously and parses it using readGraphModel.
mxEditor.prototype.save = function (url,
linefeed)
Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
mxEditor.prototype.postDiagram = function (url,
data)
Hook for subclassers to override the posting of a diagram represented by the given node to the given URL.
mxEditor.prototype.addVertex = function (parent,
vertex,
x,
y)
Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
function mxEditor(config)
Constructs a new editor.
mxEditor.prototype.askZoomResource
Specifies the resource key for the zoom dialog.
mxEditor.prototype.lastSavedResource
Specifies the resource key for the last saved info.
mxEditor.prototype.currentFileResource
Specifies the resource key for the current file info.
mxEditor.prototype.propertiesResource
Specifies the resource key for the properties window title.
mxEditor.prototype.tasksResource
Specifies the resource key for the tasks window title.
mxEditor.prototype.helpResource
Specifies the resource key for the help window title.
mxEditor.prototype.outlineResource
Specifies the resource key for the outline window title.
mxEditor.prototype.outline
Reference to the mxWindow that contains the outline.
mxEditor.prototype.graphRenderHint
Holds the render hint used for creating the graph in setGraphContainer.
mxEditor.prototype.setGraphContainer = function (container)
Sets the graph’s container using mxGraph.init.
mxEditor.prototype.toolbar
Holds a mxDefaultToolbar for displaying the toolbar.
Toolbar for the editor.
mxEditor.prototype.status
DOM container that holds the statusbar.
mxEditor.prototype.popupHandler
Holds a mxDefaultPopupMenu for displaying popupmenus.
Creates popupmenus for mouse events.
Implements a command history.
mxEditor.prototype.keyHandler
Holds a mxDefaultKeyHandler for handling keyboard events.
Binds keycodes to actionnames in an editor.
mxEditor.prototype.dblClickAction
Specifies the name of the action to be executed when a cell is double clicked.
mxEditor.prototype.swimlaneRequired
Specifies if new cells must be inserted into an existing swimlane.
mxEditor.prototype.disableContextMenu
Specifies if the context menu should be disabled in the graph container.
mxEditor.prototype.forcedInserting
Specifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected.
mxEditor.prototype.templates
Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
mxEditor.prototype.defaultEdge
Prototype edge cell that is used for creating new edges.
mxEditor.prototype.defaultEdgeStyle
Specifies the edge style to be returned in getEdgeStyle.
mxEditor.prototype.getEdgeStyle = function ()
Returns a string identifying the style of new edges.
mxEditor.prototype.defaultGroup
Prototype group cell that is used for creating new groups.
mxEditor.prototype.groupBorderSize
Default size for the border of new groups.
mxEditor.prototype.filename
Contains the URL of the last opened file as a string.
mxEditor.prototype.postParameterName
Specifies if the name of the post parameter that contains the diagram data in a post request to the server.
mxEditor.prototype.escapePostData
Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
mxEditor.prototype.urlPost
Specifies the URL to be used for posting the diagram to a backend in save.
mxEditor.prototype.urlImage
Specifies the URL to be used for creating a bitmap of the graph in the image action.
mxEditor.prototype.horizontalFlow
Specifies the direction of the flow in the diagram.
mxEditor.prototype.layoutDiagram
Specifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.
mxEditor.prototype.swimlaneSpacing
Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
mxEditor.prototype.maintainSwimlanes
Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
mxEditor.prototype.layoutSwimlanes
Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
mxEditor.prototype.cycleAttributeValues
Specifies the attribute values to be cycled when inserting new swimlanes.
mxEditor.prototype.cycleAttributeIndex
Index of the last consumed attribute index.
mxEditor.prototype.cycleAttributeName
Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
mxEditor.prototype.tasks
Holds the mxWindow created in showTasks.
mxEditor.prototype.showTasks = function ()
Shows the tasks window.
mxEditor.prototype.tasksWindowImage
Icon for the tasks window.
mxEditor.prototype.tasksTop
Specifies the top coordinate of the tasks window in pixels.
mxEditor.prototype.help
Holds the mxWindow created in showHelp.
mxEditor.prototype.showHelp = function (tasks)
Shows the help window.
mxEditor.prototype.helpWindowImage
Icon for the help window.
mxEditor.prototype.urlHelp
Specifies the URL to be used for the contents of the Online Help window.
mxEditor.prototype.helpWidth
Specifies the width of the help window in pixels.
mxEditor.prototype.helpHeight
Specifies the height of the help window in pixels.
mxEditor.prototype.propertiesWidth
Specifies the width of the properties window in pixels.
mxEditor.prototype.propertiesHeight
Specifies the height of the properties window in pixels.
mxEditor.prototype.movePropertiesDialog
Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
mxEditor.prototype.validating
Specifies if mxGraph.validateGraph should automatically be invoked after each change.
mxEditor.prototype.modified
True if the graph has been modified since it was last saved.
mxEditor.prototype.isModified = function ()
Returns modified.
mxEditor.prototype.setModified = function (value)
Sets modified to the specified boolean value.
mxEditor.prototype.addActions = function ()
Adds the built-in actions to the editor instance.
mxEditor.prototype.configure = function (node)
Configures the editor using the specified node.
mxEditor.prototype.resetFirstTime = function ()
Resets the cookie that is used to remember if the editor has already been used.
mxEditor.prototype.resetHistory = function ()
Resets the command history, modified state and counters.
mxEditor.prototype.addAction = function (actionname,
funct)
Binds the specified actionname to the specified function.
mxEditor.prototype.execute = function (actionname,
cell,
evt)
Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
mxEditor.prototype.addTemplate = function (name,
template)
Adds the specified template under the given name in templates.
mxEditor.prototype.getTemplate = function (name)
Returns the template for the given name.
mxEditor.prototype.createGraph = function ()
Creates the graph for the editor.
mxEditor.prototype.createSwimlaneManager = function (graph)
Sets the graph’s container using mxGraph.init.
mxEditor.prototype.createLayoutManager = function (graph)
Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
mxEditor.prototype.installDblClickHandler = function (graph)
Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
mxEditor.prototype.installUndoHandler = function (graph)
Adds the undoManager to the graph model and the view.
mxEditor.prototype.installDrillHandler = function (graph)
Installs listeners for dispatching the root event.
mxEditor.prototype.installChangeHandler = function (graph)
Installs the listeners required to automatically validate the graph.
mxEditor.prototype.installInsertHandler = function (graph)
Installs the handler for invoking insertFunction if one is defined.
mxEditor.prototype.createDiagramLayout = function ()
Creates the layout instance used to layout the swimlanes in the diagram.
mxEditor.prototype.createSwimlaneLayout = function ()
Creates the layout instance used to layout the children of each swimlane.
mxEditor.prototype.createToolbar = function ()
Creates the toolbar with no container.
mxEditor.prototype.setToolbarContainer = function (container)
Initializes the toolbar for the given container.
mxEditor.prototype.setStatusContainer = function (container)
Creates the status using the specified container.
mxEditor.prototype.setStatus = function (message)
Display the specified message in the status bar.
mxEditor.prototype.setTitleContainer = function (container)
Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
mxEditor.prototype.getTitle = function ()
Returns the string value for the current root of the diagram.
mxEditor.prototype.treeLayout = function (cell,
horizontal)
Executes a vertical or horizontal compact tree layout using the specified cell as an argument.
mxEditor.prototype.getRootTitle = function ()
Returns the string value of the root cell in mxGraph.model.
mxEditor.prototype.undo = function ()
Undo the last change in graph.
mxEditor.prototype.redo = function ()
Redo the last change in graph.
mxEditor.prototype.groupCells = function ()
Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
mxEditor.prototype.createGroup = function ()
Creates and returns a clone of defaultGroup to be used as a new group cell in group.
mxEditor.prototype.readGraphModel = function (node)
Reads the specified XML node into the existing graph model and resets the command history and modified state.
mxEditor.prototype.writeGraphModel = function (linefeed)
Hook to create the string representation of the diagram.
mxEditor.prototype.getUrlPost = function ()
Returns the URL to post the diagram to.
mxEditor.prototype.getUrlImage = function ()
Returns the URL to create the image with.
mxEditor.prototype.swapStyles = function (first,
second)
Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
mxEditor.prototype.showProperties = function (cell)
Creates and shows the properties dialog for the given cell.
mxEditor.prototype.isPropertiesVisible = function ()
Returns true if the properties dialog is currently visible.
mxEditor.prototype.createProperties = function (cell)
Creates and returns the DOM node that represents the contents of the properties dialog for the given cell.
mxEditor.prototype.hideProperties = function ()
Hides the properties dialog.
mxEditor.prototype.refreshTasks = function (div)
Updates the contents of the tasks window using createTasks.
mxEditor.prototype.createTasks = function (div)
Updates the contents of the given DOM node to display the tasks associated with the current editor state.
mxEditor.prototype.showOutline = function ()
Shows the outline window.
mxEditor.prototype.setMode = function(modename)
Puts the graph into the specified mode.
mxEditor.prototype.createPopupMenu = function (menu,
cell,
evt)
Uses popupHandler to create the menu in the graph’s panning handler.
mxEditor.prototype.createEdge = function (source,
target)
Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
mxEditor.prototype.consumeCycleAttribute = function (cell)
Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
mxEditor.prototype.cycleAttribute = function (cell)
Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
mxEditor.prototype.destroy = function ()
Removes the editor and all its associated resources.
register: function(codec)
Registers a new codec and associates the name of the template constructor in the codec with the codec object.
addAlias: function(classname,
codecname)
Adds an alias for mapping a classname to a codecname.
getCodec: function(ctor)
Returns a codec that handles objects that are constructed using the given constructor.
function mxCodec(document)
Constructs an XML encoder/decoder for the specified owner document.
mxCodec.prototype.document
The owner document of the codec.
mxCodec.prototype.objects
Maps from IDs to objects.
mxCodec.prototype.elements
Lookup table for resolving IDs to elements.
mxCodec.prototype.encodeDefaults
Specifies if default values should be encoded.
mxCodec.prototype.putObject = function(id,
obj)
Assoiates the given object with the given ID and returns the given object.
mxCodec.prototype.getObject = function(id)
Returns the decoded object for the element with the specified ID in document.
mxCodec.prototype.lookup = function(id)
Hook for subclassers to implement a custom lookup mechanism for cell IDs.
mxCodec.prototype.getElementById = function(id)
Returns the element with the given ID from document.
mxCodec.prototype.updateElements = function()
Returns the element with the given ID from document.
mxCodec.prototype.addElement = function(node)
Adds the given element to elements if it has an ID.
mxCodec.prototype.getId = function(obj)
Returns the ID of the specified object.
mxCodec.prototype.reference = function(obj)
Hook for subclassers to implement a custom method for retrieving IDs from objects.
mxCodec.prototype.encode = function(obj)
Encodes the specified object and returns the resulting XML node.
mxCodec.prototype.decode = function(node,
into)
Decodes the given XML node.
mxCodec.prototype.encodeCell = function(cell,
node,
includeChildren)
Encoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg.
mxCodec.prototype.isCellCodec = function(codec)
Returns true if the given codec is a cell codec.
mxCodec.prototype.decodeCell = function(node,
restoreStructures)
Decodes cells that have been encoded using inversion, ie.
mxCodec.prototype.insertIntoGraph = function(cell)
Inserts the given cell into its parent and terminal cells.
mxCodec.prototype.setAttribute = function(node,
attribute,
value)
Sets the attribute on the specified node to value.
function mxObjectCodec(template,
exclude,
idrefs,
mapping)
Constructs a new codec for the specified template object.
mxObjectCodec.allowEval
Static global switch that specifies if expressions in arrays are allowed.
mxObjectCodec.prototype.template
Holds the template object associated with this codec.
mxObjectCodec.prototype.exclude
Array containing the variable names that should be ignored by the codec.
mxObjectCodec.prototype.idrefs
Array containing the variable names that should be turned into or converted from references.
mxObjectCodec.prototype.mapping
Maps from from fieldnames to XML attribute names.
mxObjectCodec.prototype.reverse
Maps from from XML attribute names to fieldnames.
mxObjectCodec.prototype.getName = function()
Returns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded.
mxObjectCodec.prototype.cloneTemplate = function()
Returns a new instance of the template for this codec.
mxObjectCodec.prototype.getFieldName = function(attributename)
Returns the fieldname for the given attributename.
mxObjectCodec.prototype.getAttributeName = function(fieldname)
Returns the attributename for the given fieldname.
mxObjectCodec.prototype.isExcluded = function(obj,
attr,
value,
write)
Returns true if the given attribute is to be ignored by the codec.
mxObjectCodec.prototype.isReference = function(obj,
attr,
value,
write)
Returns true if the given fieldname is to be treated as a textual reference (ID).
mxObjectCodec.prototype.encode = function(enc,
obj)
Encodes the specified object and returns a node representing then given object.
mxObjectCodec.prototype.encodeObject = function(enc,
obj,
node)
Encodes the value of each member in then given obj into the given node using encodeValue.
mxObjectCodec.prototype.encodeValue = function(enc,
obj,
name,
value,
node)
Converts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.
mxObjectCodec.prototype.writeAttribute = function(enc,
obj,
name,
value,
node)
Writes the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.
mxObjectCodec.prototype.writePrimitiveAttribute = function(enc,
obj,
name,
value,
node)
Writes the given value as an attribute of the given node.
mxObjectCodec.prototype.writeComplexAttribute = function(enc,
obj,
name,
value,
node)
Writes the given value as a child node of the given node.
mxObjectCodec.prototype.convertAttributeToXml = function(enc,
obj,
name,
value)
Converts true to “1” and false to “0” is isBooleanAttribute returns true.
mxObjectCodec.prototype.isBooleanAttribute = function(enc,
obj,
name,
value)
Returns true if the given object attribute is a boolean value.
mxObjectCodec.prototype.convertAttributeFromXml = function(dec,
attr,
obj)
Converts booleans and numeric values to the respective types.
mxObjectCodec.prototype.isNumericAttribute = function(dec,
attr,
obj)
Returns true if the given XML attribute is or should be a numeric value.
mxObjectCodec.prototype.beforeEncode = function(enc,
obj,
node)
Hook for subclassers to pre-process the object before encoding.
mxObjectCodec.prototype.afterEncode = function(enc,
obj,
node)
Hook for subclassers to post-process the node for the given object after encoding and return the post-processed node.
mxObjectCodec.prototype.decode = function(dec,
node,
into)
Parses the given node into the object or returns a new object representing the given node.
mxObjectCodec.prototype.decodeNode = function(dec,
node,
obj)
Calls decodeAttributes and decodeChildren for the given node.
mxObjectCodec.prototype.decodeAttributes = function(dec,
node,
obj)
Decodes all attributes of the given node using decodeAttribute.
mxObjectCodec.prototype.decodeChildren = function(dec,
node,
obj)
Decodes all children of the given node using decodeChild.
mxObjectCodec.prototype.decodeAttribute = function(dec,
attr,
obj)
Reads the given attribute into the specified object.
mxObjectCodec.prototype.isIgnoredAttribute = function(dec,
attr,
obj)
Returns true if the given attribute should be ignored.
mxObjectCodec.prototype.decodeChild = function(dec,
child,
obj)
Reads the specified child into the given object.
mxObjectCodec.prototype.getFieldTemplate = function(obj,
fieldname,
child)
Returns the template instance for the given field.
mxObjectCodec.prototype.addObjectValue = function(obj,
fieldname,
value,
template)
Sets the decoded child node as a value of the given object.
mxObjectCodec.prototype.processInclude = function(dec,
node,
into)
Returns true if the given node is an include directive and executes the include by decoding the XML document.
mxObjectCodec.prototype.beforeDecode = function(dec,
node,
obj)
Hook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode.
mxObjectCodec.prototype.afterDecode = function(dec,
node,
obj)
Hook for subclassers to post-process the object after decoding.
codec.isCellCodec = function()
Returns true since this is a cell codec.
codec.isExcluded = function(obj,
attr,
value,
isWrite)
Excludes user objects that are XML nodes.
codec.afterEncode = function(enc,
obj,
node)
Encodes an mxCell and wraps the XML up inside the XML of the user object (inversion).
codec.beforeDecode = function(dec,
node,
obj)
Decodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).
codec.encodeObject = function(enc,
obj,
node)
Encodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec.
Codec for mxCells.
codec.decodeChild = function(dec,
child,
obj)
Overrides decode child to handle special child nodes.
codec.decodeRoot = function(dec,
root,
model)
Reads the cells into the graph model.
codec.beforeDecode = function(dec,
node,
obj)
Decodes the optional children as cells using the respective decoder.
codec.afterDecode = function(dec,
node,
obj)
Restores the state by assigning the previous value.
codec.isReference = function(obj,
attr,
value,
isWrite)
Returns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.
codec.isExcluded = function(obj,
attr,
value,
write)
Excludes references to parent or previous if not in the model.
codec.afterEncode = function(enc,
obj,
node)
Encodes the child recusively and adds the result to the given node.
codec.beforeDecode = function(dec,
node,
obj)
Decodes the any child nodes as using the respective codec from the registry.
codec.afterDecode = function(dec,
node,
obj)
Restores object state in the child change.
codec.afterDecode = function(dec,
node,
obj)
Restores the state by assigning the previous value.
Action to change a cell’s geometry in a model.
var mxGenericChangeCodec = function(obj,
variable)
Factory function that creates a mxObjectCodec for the specified change and fieldname.
Generic codec for JavaScript objects that implements a mapping between JavaScript objects and XML nodes that maps each field or element to an attribute or child node, and vice versa.
codec.afterDecode = function(dec,
node,
obj)
Restores the state by assigning the previous value.
codec.encode = function(enc,
view)
Encodes the given mxGraphView using encodeCell starting at the model’s root.
codec.encodeCell = function(enc,
view,
cell)
Recursively encodes the specifed cell.
codec.encode = function(enc,
obj)
Encodes a stylesheet.
codec.getStringValue = function(key,
value)
Returns the string for encoding the given value.
codec.decode = function(dec,
node,
into)
Reads a sequence of the following child nodes and attributes:
mxStylesheetCodec.allowEval
Static global switch that specifies if the use of eval is allowed for evaluating text content.
codec.encode = function(enc,
obj)
Returns null.
codec.decode = function(dec,
node,
into)
Reads a sequence of the following child nodes and attributes:
codec.encode = function(enc,
obj)
Returns null.
codec.decode = function(dec,
node,
into)
Reads a sequence of the following child nodes and attributes:
mxDefaultToolbarCodec.allowEval
Static global switch that specifies if the use of eval is allowed for evaluating text content.
codec.encode = function(enc,
obj)
Returns null.
codec.decode = function(dec,
node,
into)
Uses the given node as the config for mxDefaultPopupMenu.
codec.decodeChild = function(dec,
child,
obj)
Overrides decode child to handle special child nodes.
codec.decodeTemplates = function(dec,
node,
editor)
Decodes the cells from the given node as templates.
True if the current browser is Internet Explorer 11.x.
Basepath for all URLs in the core without trailing slash.
Specifies the resource key for the title of the error window.
Specifies the resource key for the label of the close button.
Specifies the resource key for the status message while the document is being updated.
Name of the field to be used to store the object ID.
Defines the language of the client, eg.
Specifies whether or not values in resource files are encoded with \u or percentage.
Defines the optional array of all supported language extensions.
Specifies the extension used for language files.
Specifies if the default file for a given basename should be loaded.
Defines the default language which is used in the common resource files.
Implements animation for morphing cells.
DOM node of type ELEMENT.
Defines the value for none.
Defines the default size (in px).
Defines the default family for all fonts.
Implements printing of a diagram across multiple pages.
Defines the rectangle for the A4 portrait page format.
Defines the image used for error dialogs.
Wrapper to create a drag source from a DOM element so that the element can be dragged over a graph and dropped into the graph as a new cell.
Defines the key for the segment style.
Provides various perimeter functions to be used in a style as the value of mxConstants.STYLE_PERIMETER.
Singleton class that acts as a global converter from string to object values in a style.
Defines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style.
Constant for direction east.
Constant for direction west.
Constant for direction north.
Constant for direction south.
Defines the key for the fill color.
Defines the key for the gradient color.
Name under which mxSwimlane is registered in mxCellRenderer.
Constant for left horizontal alignment.
Constant for center horizontal alignment.
Constant for right horizontal alignment.
Defines the key for the horizontal label position of vertices.
Constant for top vertical alignment.
Constant for middle vertical alignment.
Constant for bottom vertical alignment.
Defines the key for the vertical label position of vertices.
Defines the key for the align style.
Defines the key for the verticalAlign style.
Name under which mxLabel is registered in mxCellRenderer.
Defines the key for the end arrow marker.
Creates a new image export instance to be used with an export canvas.
Defines the key for the shape.
Constant for elbow horizontal.
Constant for elbow vertical.
Constant for bold fonts.
Constant for italic fonts.
Constant for underlined fonts.
Defines the key for the resizable style.
Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
The mxEventObject is a wrapper for all properties of a single event.
Specifies the event name for change.
Implements a basic animation in JavaScript.
Specifies if the fallback representation should be returned.
Base class for all canvases.
Defines various global constants.
Defines the color to be used to draw shadows in shapes and windows.
Defines the opacity for shadows.
Extends mxShape to implement a polyline (a line with multiple points).
Defines the color to be used for the guidelines in mxGraphHandler.
Defines the strokewidth to be used for the guidelines in mxGraphHandler.
Defines the key for the gradient direction.
Defines the key for the opacity style.
Defines the key for the fill opacity style.
Defines the key for the stroke opacity style.
Defines the key for the strokeColor style.
Defines the key for the strokeWidth style.
Defines the key for the shadow style.
Defines the key for the dashed style.
Defines the key for the spacing.
Defines the key for the startSize style.
Defines the key for the endSize style.
Defines the key for the rounded style.
Defines the key for the start arrow marker.
Defines the key for the rotation style.
Defines the key for the direction style.
Defines the key for the glass style.
Static global switch that specifies if the use of eval is allowed for evaluating text content and images.
Name under which mxActor is registered in mxCellRenderer.
Name under which mxCloud is registered in mxCellRenderer.
Name under which mxRectangleShape is registered in mxCellRenderer.
Name under which mxEllipse is registered in mxCellRenderer.
Name under which mxDoubleEllipse is registered in mxCellRenderer.
Name under which mxRhombus is registered in mxCellRenderer.
Name under which mxArrow is registered in mxCellRenderer.
Defines the width of the arrow shape.
Defines the spacing between the arrow shape and its terminals.
Defines the size of the arrowhead in the arrow shape.
Name under which mxArrowConnector is registered in mxCellRenderer.
Constant for text direction left to right.
Constant for text direction right to left.
Name under which mxLine is registered in mxCellRenderer.
Name under which mxImageShape is registered in mxCellRenderer.
Defines the default width and height for images used in the label shape.
Name under which mxCylinder is registered in mxCellRenderer.
Name under which mxConnector is registered in mxCellRenderer.
Defines the key for the fill color of the swimlane background.
Defines the key for the separatorColor style.
Defines the key for the swimlaneLine style.
Defines the key for the horizontal style.
Extends mxGraphLayout to implement a circluar layout for a given radius.
Extends mxGraphLayout to implement a compact tree (Moen) algorithm.
Allows to compose multiple layouts into a single layout.
Extends mxGraphLayout to implement a fast organic layout algorithm.
Extends mxGraphLayout for arranging parallel edges.
Extends mxGraphLayout for partitioning the parent cell vertically or horizontally by filling the complete area with the child cells.
Extends mxGraphLayout to create a horizontal or vertical stack of the child vertices.
An abstraction of a hierarchical edge for the hierarchy layout
Called from within the constructor.
Event handler that selects rectangular regions.
Defines the key for the image style.
var graphViewValidate = mxGraphView.prototype.validate; mxGraphView.prototype.validate = function(
   cell
)
Overrides validate to normalize validation view state and pass current state to CSS transform.
Defines the SVG display dialect name.
Defines the strict HTML display dialect.
Defines the preferred HTML display dialect name.
Defines the mixed HTML display dialect name.
Defines the VML display dialect name.
Fires between begin- and endUpdate in flipEdge.
Defines the key for the elbow style.
Fires between begin- and endUpdate in orderCells.
Fires between begin- and endUpdate in cellsOrdered.
Fires between begin- and endUpdate in groupCells.
Fires between begin- and endUpdate in addCells.
Fires between begin- and endUpdate in cellsAdded.
Fires between begin- and endUpdate in removeCells.
Fires between begin- and endUpdate in cellsRemoved.
Fires between begin- and endUpdate in splitEdge.
Fires between begin- and endUpdate in toggleCells.
Fires between begin- and endUpdate in foldCells.
Fires between begin- and endUpdate in cellsFolded.
Fires between begin- and endUpdate in updateCellSize.
Fires between begin- and endUpdate in moveCells.
Fires between begin- and endUpdate in cellsMoved.
Fires between begin- and endUpdate in cellConnected.
Defines the key for the white-space style.
Defines the key for the overflow style.
Defines the key for the indicatorColor style.
Defines the key for the indicatorGradientColor style.
Defines the key for the indicator shape used within an mxLabel.
Defines the key for the indicator image used within an mxLabel.
Defines the key for the cloneable style.
Defines the key for the deletable style.
Defines the key for the rotatable style.
Defines the key for the movable style.
Defines the key for the bendable style.
Defines the key for the editable style.
Defines the key for the autosize style.
Defines the key for the foldable style.
Specifies the event name for mouseDown.
Specifies the event name for mouseMove.
Specifies the event name for mouseUp.
Implements internationalization.
Specifies the default valid color.
Specifies the default invalid color.
Defines the portion of the cell which is to be used as a connectable region.
Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
Defines the vertical offset for the tooltip.
Constructs an edge handler for the specified mxCellState.
Custom codec for configuring mxDefaultKeyHandlers.
Specifies the event name for escape.
Custom codec for configuring mxDefaultPopupMenus.
Custom codec for configuring mxDefaultToolbars.
Basepath for all images URLs in the core without trailing slash.
Action to change the attribute of a cell’s user object.
Codec for mxEditors.
Called from within the constructor.
Implements an outline (aka overview) for a graph.
Singleton class that acts as a global registry for codecs.
Codec for mxGraphModels.
Codec for mxChildChanges.
Codec for mxRootChanges.
A singleton class that implements a simple console.
Close